jquery pop弹出框

最新推荐文章于 2025-07-24 15:05:20 发布

转载最新推荐文章于 2025-07-24 15:05:20 发布 · 1.5k 阅读

html5 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一个使用纯HTML和CSS创建的对话框样式，并通过jQuery进行了简单的交互实现。该对话框可以居中显示，并且带有遮罩层效果及关闭按钮。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>华贸</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" 
name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />    
    <style> 
   #dialog-overlay {
                /* set it to fill the whil screen */
                width:100%;
                height:100%;
                /* transparency for different browsers */
                filter:alpha(opacity=50);
                -moz-opacity:0.5;
                -khtml-opacity: 0.5;
                opacity: 0.5;
                background:#000;
                /* make sure it appear behind the dialog box but above everything else */
                position:absolute;
                top:0; 
                left:0;
                z-index:3000;
                /* hide it by default */
                display:none;
                }
                #dialog-box {
                /* css3 drop shadow */
                -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
                /* css3 border radius */
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                background:#eee;
                /* styling of the dialog box, i have a fixed dimension for this demo */
                width:328px;
                /* make sure it has the highest z-index */
                position:absolute;
                z-index:5000;
                /* hide it by default */
                display:none;
                }
                #dialog-box .dialog-content {
                /* style the content */
                text-align:left;
                padding:10px;
                margin:13px;
                color:#666;
                font-family:arial;
                font-size:11px;
                }
                a.button {
                /* styles for button */
                margin:10px auto 0 auto;
                text-align:center;
                background-color: #e33100;
                display: block;
                width:50px;
                padding: 5px 10px 6px;
                color: #fff;
                text-decoration: none;
                font-weight: bold;
                line-height: 1;
                /* css3 implementation :) */
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
                border-bottom: 1px solid rgba(0,0,0,0.25);
                position: relative;
                cursor: pointer;
                }
                a.button:hover {
                background-color: #c33100;
                }
                /* extra styling */
                #dialog-box .dialog-content p {
                font-weight:700; margin:0;
                }
                #dialog-box .dialog-content ul {
                margin:10px 0 10px 20px;
                padding:0;
                height:50px;
                }

    </style>

</head>

<body>
  

  <a href="javascript:popup('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.')">Popup!</a>
            <div id="dialog-overlay"></div>
            <div id="dialog-box">
                <div class="dialog-content">
                    <div id="dialog-message"></div>
                    <a href="#" class="button">Close</a>
                </div>
            </div>


</body>
</html>

<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script type="text/javascript">
   


$(function () {                   
                    $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {    
                        $('#dialog-overlay, #dialog-box').hide();      
                        return false;
                    });

                      
                    $(window).resize(function () {                       
                        if (!$('#dialog-box').is(':hidden')) popup();      
                    });
                });

               
                function popup(message) {

                   
                    var maskHeight = $(document).height(); 
                    var maskWidth = $(window).width();

                    // calculate the values for center alignment
                    var dialogHeight =  $('#dialog-box').outerHeight(); 
                    var dialogWidth = $('#dialog-box').outerWidth();

                    // assign values to the overlay and dialog box
                    $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
                    $('#dialog-box').css({
                            top: "50%",
                            left:"50%",
                            "margin-left": -(dialogWidth/2),
                            "margin-top": -(dialogHeight/2)
                            }).show();

                    // display the message
                    $('#dialog-message').html(message);
                }
    
    
    </script>