div对话框 - 爱码网

<!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 >弹出</button>  
    <div >    
        <button >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>