【问题标题】:Show a div as a modal pop up将 div 显示为模态弹出窗口
【发布时间】:2017-09-13 23:46:41
【问题描述】:

我有以下 div:

<div id="divAlert">
    <div id='divAlertText'>You must select a language.</div>
    <div id='divAlertButton' class='btn blue' onclick="HideAlert();">Ok</div>
</div>

这个 HTML 页面是否有更多的 div 和按钮。我想将divAlert 显示为模态弹出窗口。

我知道在 jQuery 中有一些东西,我想,我可以用它来显示我的 div,用一个半透明的黑色背景填充整个页面。但我不记得它的名字了。

有什么建议吗?

【问题讨论】:

    标签: html modal-dialog


    【解决方案1】:

    一个简单的模态弹出div或对话框可以通过CSS属性和一点点jQuery来完成。基本思想很简单:

  • 1. 创建一个具有半透明背景的 div 并在点击时将其显示在内容页面的顶部。
  • 2. 在半透明调光/隐藏 div 的顶部显示您的弹出 div 或警报 div。
  • 所以我们需要三个 div:

  • 内容(网站的主要内容)。
  • hider(使内容变暗)。
  • popup_box(要显示的模态 div)。

    首先让我们定义 CSS:

        #hider
        {
            position:absolute;
            top: 0%;
            left: 0%;
            width:1600px;
            height:2000px;
            margin-top: -800px; /*set to a negative number 1/2 of your height*/
            margin-left: -500px; /*set to a negative number 1/2 of your width*/
            /*
            z- index must be lower than pop up box
           */
            z-index: 99;
           background-color:Black;
           //for transparency
           opacity:0.6;
        }
    
        #popup_box  
        {
    
        position:absolute;
            top: 50%;
            left: 50%;
            width:10em;
            height:10em;
            margin-top: -5em; /*set to a negative number 1/2 of your height*/
            margin-left: -5em; /*set to a negative number 1/2 of your width*/
            border: 1px solid #ccc;
            border:  2px solid black;
            z-index:100; 
    
        }
    

    重要的是我们将隐藏 div 的 z-index 设置为低于 pop_up 框,因为我们希望在顶部显示 popup_box。
    java脚本来了:

            $(document).ready(function () {
            //hide hider and popup_box
            $("#hider").hide();
            $("#popup_box").hide();
    
            //on click show the hider div and the message
            $("#showpopup").click(function () {
                $("#hider").fadeIn("slow");
                $('#popup_box').fadeIn("slow");
            });
            //on click hide the message and the
            $("#buttonClose").click(function () {
    
                $("#hider").fadeOut("slow");
                $('#popup_box').fadeOut("slow");
            });
    
            });
    

    最后是 HTML:

    <div id="hider"></div>
    <div id="popup_box">
        Message<br />
        <a id="buttonClose">Close</a>
    </div>    
    <div id="content">
        Page's main content.<br />
        <a id="showpopup">ClickMe</a>
    </div>
    

    我使用了 jquery-1.4.1.min.js www.jquery.com/download 并在 Firefox 中测试了代码。希望这会有所帮助。

  • 【讨论】:

      【解决方案2】:

      您可以使用 jquery 对话框小部件

      http://jqueryui.com/demos/dialog/

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2017-03-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-05-19
        • 1970-01-01
        相关资源
        最近更新 更多