弹出菜单&；灰色背景 - Popup & Greyout background

Popup & Greyout background

本文关键字：灰色背景 amp 菜单 | 更新日期: 2023-09-27

我正在尝试创建一个带有一些信息的小弹出窗口，并将背景灰显。

我的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>

my-js函数：

(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代码更改为上面的代码：现在。。上述变化有效，但仅为第一次。当我点击文档时，它会把我带回页面，然后如果我再次点击我的链接，我会弹出窗口，但没有灰色。

从其他div中取出弹出的div，这样它们就可以在不受其他CSS影响的情况下工作
Delegate用于在页面加载后、Ajax期间或任何其他方式加载的元素上创建事件。此外，它有三个参数，根据您的代码，您不需要它

Js文件：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();
    });
});