【问题标题】:CSS and js template, open window in same windowCSS和js模板,在同一个窗口中打开窗口
【发布时间】:2019-05-15 23:49:38
【问题描述】:

我下载了:

https://www.free-css.com/free-css-templates/page238/resume

在“我的项目”下有图像,当按下一个时会打开一个新窗口,但在同一侧。但是,当单击另一个图像时,将打开同一页面。我想用不同的图像做不同的页面。我已经尝试将“页面”和href“”#test01”上的“id”更改为test01。但除非我使用原始的“Animatedmodular”,否则它不起作用。

如何在同一个窗口中制作多个“弹出窗口”?

我不知道我是否做对了。我试图让脚本与图像一起工作。但是,如果您查看“现场演示”并向下滚动并按图像“几秒钟内的样机”,然后按“浮动样机”,它们都会打开同一个窗口,我希望它们被“链接”到不同的窗口。我想要第二张图片打开“”。我希望有人了解我想要做什么以及如何修复它的脚本。自 90 年代以来,我一直没有做主页。所以我很高兴我能得到所有的帮助。 :)

.animatedModal-on .close-popup-modal {
  opacity: 1;
}
  <!-- single work -->
  <div class="col-md-4 col-sm-6  fashion logo">
    <a id="demo01" href="#animatedModal" class="portfolio_item"> <img src="img/22-00.jpg" alt="image" class="img-responsive" />
      <div class="portfolio_item_hover">
        <div class="portfolio-border clearfix">
          <div class="item_info"> <span>test.</span> <em>test </em> </div>
        </div>
      </div>
    </a>
  </div>
  <!-- end single work -->

  <!-- single work -->
  <div class="col-md-4 col-sm-6 ads graphics">
    <a id="demo02" href="#demo2" class="portfolio_item"> <img src="img/19-00.jpg" alt="image" class="img-responsive" />
      <div class="portfolio_item_hover">
        <div class="portfolio-border clearfix">
          <div class="item_info"> <span>test</em> </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- end single work -->
                            
                            <!-- single work -->
                            <div class="col-md-4 col-sm-6 photography">
                                <a id="demo03" href="#03korsett" class="portfolio_item"> <img src="img/01-00.jpg" alt="image" class="img-responsive" />
                                    <div class="portfolio_item_hover">
                                        <div class="portfolio-border clearfix">
                                            <div class="item_info"> <span>test</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- end single work -->
                            
                            
                            <!--DEMO01-->
    <div id="animatedModal" class="popup-modal">
        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
        <div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div>
        <div class="clearfix"></div>
        <div class="modal-content">
            <div class="container">
                <div class="portfolio-padding">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Vtest</h2>
                        <div class="h-50"></div>
                        <p>test</p>
                        <br />
                        <br /> <img src="img/22-00.jpg" alt="" class="img-responsive" />
                        <br />
                        <br />
                        <p>Atest</p>
                        <br />
                        <br /> </div>
                </div>
            </div>
        </div>
    </div>
    
    
                                
                            <!--DEMO02-->
    <div id="demo2" class="popup-modal">
        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
        <div id="btn-demo2" class="close-demo2 close-demo2"> <i class="ion-close-round"></i> </div>
        <div class="clearfix"></div>
        <div class="modal-content">
            <div class="container">
                <div class="portfolio-padding">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Vtest</h2>
                        <div class="h-50"></div>
                        <p>test</p>
                        <br />
                        <br /> <img src="img/22-00.jpg" alt="" class="img-responsive" />
                        <br />
                        <br />
                        <p>Atest</p>
                        <br />
                        <br /> </div>
                </div>
            </div>
        </div>
    </div>

【问题讨论】:

  • 您好,欢迎来到 StackOverflow。请发布您迄今为止尝试过的代码。我们需要一个最小的、完整的、可验证的示例来使用
  • 谢谢。我明天将发布代码。我现在不在电脑上。我应该发布完整的代码还是只发布一次带有链接和页面的代码?我还需要发布 js 文件吗?
  • 我更新了帖子。

标签: javascript css popup


【解决方案1】:

$(document).ready(function () 
{   
    
    /* get id of form to work with */
    
    $('.show-lookup').click(function()
    {
        var pairedId = $(this).attr('id').split('-');
        var lookupToDisplay = '#lookup-' + pairedId[1];
        $('.overlay').show();
        $(lookupToDisplay).show();
        $('.js-popup-focus').focus();
    });
    
/* put value selected in lookup into field in main form */
    
    $('.lookup-popup input').on('change', function() 
    {  
        var fieldname = $(this).attr('name');
        var pairedId = $(this).parent().attr('id').split('-');
        var selOption = $('input[name='+fieldname+']:checked').val(); 
        $("#entry-"+pairedId[1]).val(selOption);
    });
    
/* for checkbox version, append selected values to field in main form */    
    
    $('.lookup-multiselect input').on('change', function() 
    {  
        var pairedId = $(this).parent().attr('id').split('-');
        //event.preventDefault();
        var selOptions = $(".category input:checkbox:checked").map(function(){
          return $(this).val();
        }).get(); // <----
        //console.log(selOptions);
        var selectedString = selOptions.toString();
        $("#entry-"+pairedId[1]).val(selOptions);
    });
    
    $('.close-button').click(function()
    {
        $(this).parent().hide();
        var pairedId = $(this).parent().attr('id').split('-');
        $('.overlay').hide();
        $("#entry-"+pairedId[1]).focus();
    });
});
button {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  border-radius: 2px;
  border: 0;
  padding: 6px;
  margin: 0;
  display: inline-block;
  color: #fff;
  background-color: #333;
  position: relative;
  height: 36px;
  min-width: 64px;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  overflow: hidden;
  will-change: box-shadow;
  transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  vertical-align: middle;
}

.right {
  float: right;
}

.lookup-popup, .lookup-multiselect {
    display: none;
    z-index: 99999;
    padding: 1em;
    border: 1px solid #666;
    border-radius: 5px;
    position: absolute;
    top: 6em;
    left: 35%;
    width: 70%;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    background: rgba(237, 237, 237, 1);
}

body {
  font-family: Open Sans, Calibri, Helvetica, sans serif;
  padding: 2em;
}

.overlay {
    display: none;
    position: fixed;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.7;
    background: #333;
}
.lookup-popup {
    padding: 0.5em;
    display: none;
    z-index: 99999;
    background-color: #fff;
    position: absolute;
    top: 5em;
    left: 25%;
    width: 20%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<input type="text" class="order-entry js-initial-focus" id="entry-r1" placeholder="place" tabindex="1">
        <button class="show-lookup" id="popup-r1" tabindex="2">Search</button>
        </p>
        <div class="overlay">&nbsp;</div>
        <div class="lookup-popup" id="lookup-r1">
            <button class="close-button right"><i class="material-icons">close</i></button>
            <strong>Select...</strong>
            <form action="#" id="form-r1" name="form-r1" method="post">
                    <input class="js-popup-focus" type="radio" name="place" id="antwerp" value="Antwerp" tabindex="3"> <label for="antwerp">Antwerp</label><br>
                    <input type="radio" name="place" id="berlin" value="Berlin" tabindex="3"> <label for="berlin">Berlin</label><br>
                    <input type="radio" name="place" id="cairo" value="Cairo" tabindex="3"> <label for="cairo">Cairo</label><br>
                    <input type="radio" name="place" id="duss" value="D&uuml;sseldorf" tabindex="3"> <label for="duss">D&uuml;sseldorf</label><br>
            </form>
        </div>
        
  <p>      
<input type="text" class="order-entry js-initial-focus" id="entry-r2" placeholder="place" tabindex="1">
        <button class="show-lookup" id="popup-r2" tabindex="2">Search</button>
        </p>
        <div class="overlay">&nbsp;</div>
        <div class="lookup-popup" id="lookup-r2">
            <button class="close-button right"><i class="material-icons">close</i></button>
            <strong>Select...</strong>
            <form action="#" id="form-r2" name="form-r2" method="post">
                    <input type="radio" name="place" id="exeter" value="Exeter" tabindex="3"> <label for="exeter">Exeter</label><br>
                    <input type="radio" name="place" id="frankfurt" value="Frankfurt" tabindex="3"> <label for="frankfurt">Frankfurt</label><br>
                    <input type="radio" name="place" id="ghent" value="Ghent" tabindex="3"> <label for="ghent">Ghent</label><br>
<input class="js-popup-focus" type="radio" name="place" id="hamburg" value="Hamburg" tabindex="3"> <label for="hamburg">Hamburg</label><br>
            </form>
        </div>

如果您使用提供的类和 ID,jQuery 将遍历各种表单元素并将它们与各自的弹出窗口匹配。

使用 entry-r1、entry-r2 等作为输入字段的 id。使用 lookup-r1、lookup-r2 等作为相应弹出窗口的 id。使用 form-r1、form-r2 等作为查找弹出窗口中表单的 id。

【讨论】:

    【解决方案2】:

    你必须在你的 css 中添加你的新模态的 id :

    .animatedModal-on .demo2-on .close-popup-modal {
      opacity: 1;
    }
    

    在你的 custom.js 中,你需要定义你的模态标记如下:

    $("#demo02").animatedModal({
        modalTarget: "demo2"
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-10-08
      • 2016-12-11
      • 1970-01-01
      • 1970-01-01
      • 2012-03-18
      • 2023-01-27
      • 1970-01-01
      相关资源
      最近更新 更多