Question

我正在尝试使用一些信息创建一个小弹出窗口，并使背景变灰。

我的php：

<script type="text/javascript" src="help-file/js-funct.js" defer="defer"></script>
</head>
<body>
<div id="all">
<div id="frpic"><img src="one.jpg" /></div>

<div id="frdesc">
<span class="txt-frdes">
<a id="lnk-s" class="pop-lnk">more...</a>
</span>
</div>

<br />
<div id="popup" class="hide-it"></div>
<br />
<div id="gr-out" class="hide-it"></div>
</div></body></html>

我的js-funct：

(document).ready(function(){
 $('#all')
///////LINKS////////
  .delegate... other functions
///////POPUP///////
 .delegate('a.pop-lnk', 'click', function(){
  var page = $(this).attr('id');
  $('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()});
  $('#popup').css({'display': 'block'});
  $('#popup').load("../help-file/loop-b.php?page="+ page);
 })

 .delegate('.hide-it', 'click', function(){ 
  $('.hide-it').hide();
 });

});

我的css：

div#popup{
 position: absolute;
 top: 50%; left: 50%;
 height: 310px; width: 310px;
 margin-top: -155px; margin-left: -155px;
 padding: 0 3px 0 3px;
 z-index: 20;
 display: none;
 text-align: justify;
}
    div#gr-out{
     position: absolute;
     top: 0; left: 0;
     background: #000;
    }

Jaymin 在我阅读之前你的答案我确实将我的JQ代码更改为上面的内容：现在..上述更改仅在第一次但时有效。当我点击文档时，它会将我带回页面，然后如果我再次单击我的链接，我会弹出窗口，但没有灰色。

Answer 1

从其他div中取出弹出窗口，以便它们可以在不受其他CSS影响的情况下工作。
委托用于在页面加载后，Ajax期间或通过任何其他方式加载的元素上创建事件。它也有三个参数，根据你的代码，你不需要它。

Jsfiddle：http://jsfiddle.net/jaymingajjar/pgq4a5w7/

以下是更正适合我的代码：

<强> PHP

<body>
    <div id="all">
        <div id="frpic"><img src="one.jpg" /></div>
        <div id="frdesc">
            <span class="txt-frdes">
                <a id="lnk-s" class="pop-lnk">more...</a>
            </span>
        </div>
    </div>
    <div id="popup" class="hide-it"></div>
    <div id="gr-out" class="hide-it"></div>
</body>

<强> CSS：

div#popup{
    position: absolute;
    top: 50%; left: 50%;
    height: 310px; width: 310px;
    margin-top: -155px; margin-left: -155px;
    padding: 0 3px 0 3px;
    z-index: 20;
    display: none;
    text-align: justify;
}
div#gr-out{
    position: absolute;
    top: 0; left: 0;
    background: #000;
}

Javascript：已编辑

$(document).ready(function(){
    //$('#all')
    ///////LINKS////////
    //.delegate... other functions
    ///////POPUP///////
    $('#all').delegate('a.pop-lnk', 'click', function(){
        var page = $(this).attr('id');
        $('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()}).show();
        $('#popup').css({'display': 'block'});
        $('#popup').load("../help-file/loop-b.php?page="+ page);
    })
    $('body').delegate('.hide-it', 'click', function(){ 
        $('.hide-it').hide();
    });
});

Popup＆amp; Greyout背景

1 个答案: