div对话框

最新推荐文章于 2024-08-03 17:05:14 发布

徐同保

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量838

点赞数 1

分类专栏： web前端前端技术分享文章标签： javascript 对话框

本文链接：https://blog.csdn.net/xutongbao/article/details/78551946

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>  
<html lang="en">  
<head>    
<meta charset="UTF-8">  
<title>div对话框</title>  
    <style type="text/css">    
        #dialog    
        {    
            display:none;    
            border:1px solid #ddd;    
            height:600px;    
            width:900px;    
            position:fixed;   
            top:50%;  
            left:50%;    
            margin-top: -300px;   
            margin-left: -450px;  
            z-index:2;  
            background: #f8f8f8;    
        }    
    </style>    
</head>    
<body style="height: 1500px;">    
    <button id="open">弹出</button>  
    <div id="dialog">    
        <button id="close" style="float: right;">X</button>  
        <div></div>    
    </div>    
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>  
    <script type="text/javascript">    
        $(function () {  
            $('#open').click(function () {  
                show();  
            });  
            $('#close').click(function() {  
                hide();  
            })  
            var dialog = $('#dialog');    
            function show()    
            {    
                dialog.css({'display': 'block'});  
            }    
            function hide()    
            {    
                dialog.css({'display': 'none'});  
            }    
        });  

    </script>    
</body>    
</html>