gpt4 book ai didi

php - 弹出和灰色背景

转载 作者:太空宇宙 更新时间:2023-11-03 21:36:17 25 4
gpt4 key购买 nike

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

我的 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 函数:

(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 代码更改为上面的内容: 现在.. 以上更改仅在第一次但是 时有效。当我点击文档时,它会将我带回到页面,然后如果我再次点击我的链接,我会看到弹出窗口,但没有灰显。

最佳答案

  1. 将您的弹出式 div 与其他 div 分开,这样它们就可以在不受其他 CSS 影响的情况下工作。
  2. Delegate 用于在页面加载后、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();
});
});

关于php - 弹出和灰色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26314251/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com