Question

我试图在不使用任何插件的情况下制作弹出窗口。到目前为止，我编写了一个适用于一个元素的代码，我想知道如何才能使它与多个元素一起工作。

我可以通过复制粘贴每个项目上具有不同ID的所有代码来执行我想要的操作。但我相信还有更好的方法：）

提前致谢。

这里是我正在使用的代码：

HTML

<div id="wrapper">
     <section id="s1" data-index="1">
        //section one content
     </section>

     <section id="s2" data-index="2">
        <div class="container">
          <img class="button" src='img1.png' alt="" />
           <img class="button" src='img2.png' alt="" />
            <img class="button" src='img3.png' alt="" />

             <img class="popUp" src='largeImage1.png' alt="" />
            <img class="popUp" src='largeImage2.png' alt="" />
           <img class="popUp" src='largeImage3.png' alt="" />
          </div>
        <div class="cover"></div>
      </section>
    </div>

CSS

.button{
    cursor: pointer;
}
.popUp{
    display: block;
    height: 500px;
    width: 500px;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    display: none;
    z-index:9999;
}
.cover{
    background-color:black;
    width:100%;
    height:100%;
    display:none;
    position:absolute;
}

JQuery的

$(".button").click(function () {
        $(".popUp").fadeIn(500);
        $(".cover").fadeTo(500, 0.5);
});

$(".popUp").click(function () {
        $(".popUp").fadeOut(500);
        $(".cover").fadeOut(500);
});

Answer 1

你的这个：

$( ".button" ).click(function(){
   var left  = ($(window).width()/2)-(900/2),
   top   = ($(window).height()/2)-(500/2),
   url = "http://google.com";
   window.open( url, "popup", "width=780, height=550, top=30, left="+left );
});

JQuery弹出窗口帮助需要

1 个答案: