我正在使用以下代码。我想在点击时打开不同的内容。
<style>
#overlay_form {
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop {
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
关注javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//open popup
$("#pop").click(function () {
$("#overlay_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function () {
$("#overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup() {
if (!$("#overlay_form").is(':visible')) {
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position: 'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize', positionPopup);
</script>
我想使用类似html的内容
<html>
<div>
<a href="#" id="pop" >Product Overview</a>
<br/>
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>
<a href="#" id="pop" >User Interface</a>
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>
</div>
</html>
点击不同的链接,我想在弹出窗口中打开不同的内容。
可以不重复使用不同ID的整个java脚本。
由于
答案 0 :(得分:0)
首先,您不能在同一页面上使用相同的ID两次,目前在您的链接上使用#pop
,#close
和#overlay_form
,请使用类更新它们或者不同的ids。
您可以在存储内容的每个div
代码中添加a
,然后点击即可显示/隐藏此内容吗?
答案 1 :(得分:0)
您可以通过多种方式执行此操作,但使用现有代码的最简单方法需要将大量ID转换为类。像这样:
<强> HTML 强>
<html>
<div>
<a href="#" class="pop" popup-id="popup1">Product Overview</a>
<div class="overlay_form" id="popup1" style="display:none">
<a href="#" class="close" >Close</a><br />
Popup1 text.
</div>
<a href="#" class="pop" popup-id="popup2">User Interface</a>
<div class="overlay_form" id="popup2" style="display:none">
<a href="#" class="close" >Close</a><br />
Popup2 text.
</div>
</div>
</html>
<强> JS 强>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//open popup
$(".pop").click(function () {
var targetPopup = $(this).attr('popup-id');
$("#" + targetPopup).fadeIn(1000);
positionPopup(targetPopup );
});
//close popup
$(".close").click(function () {
$(this).closest(".overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(targetPopup) {
$("#" + targetPopup).css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position: 'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize', positionPopup);
</script>
这种方法允许您使用class属性来定义一组更大的项目,这些项目共享相同的行为(以及样式:)),同时仍然支持每个弹出窗口的“唯一性”。
注意:这会使用自定义属性(popup-id
),除非您更新DOCTYPE
声明以包含它,否则不会进行验证。然而,许多人只是忽略了这个问题,特别是因为HTML5正在添加对自定义属性的支持。
编辑:忘了提。 。 。由于您要在此处将ID更改为类,因此您还需要将CSS #pop
和#overlay_form
更新为.pop
和.overlay_form
。