需要 JQuery 弹出窗口帮助

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 );
});