如何在点击html链接的弹出窗口打开不同的内容

How to open different content in popups on clicking html links

本文关键字：窗口 链接 html      更新时间：2023-09-26

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

<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和#overlay_form，用类或不同的id更新它们。

您可以在每个a标签中添加div，存储您的内容，然后只需显示/隐藏此点击?

有许多方法可以做到这一点，但最简单的方法是使用现有代码，需要将许多id转换为类。像这样:

<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增加了对自定义属性的支持之后。

EDIT:忘了提…由于您在这里将id更改为类，您还需要将CSS #pop和#overlay_form更新为.pop和.overlay_form。

相关文章：