gpt4 book ai didi

javascript - 如何在单击 html 链接时在弹出窗口中打开不同的内容

转载 作者:行者123 更新时间:2023-11-28 03:34:25 27 4
gpt4 key购买 nike

我正在使用以下代码。我想在点击时打开不同的内容。

<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 脚本是可能的。

谢谢

最佳答案

首先你不能在同一个页面上使用同一个id两次,你目前使用#pop, #close and #overlay_form 在你的两个链接上,用一个类或不同的 ids 更新它们。

您可以在每个存储内容的 a 标签中添加一个 div,然后在点击时显示/隐藏它吗?

关于javascript - 如何在单击 html 链接时在弹出窗口中打开不同的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15339352/

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