<!doctype html> <html> <head> <meta charset="utf-8"> <title>模态对话框的使用</title> <style type="text/css"> *{margin:0;padding:0;font-size:16px;font-family:微软雅黑;line-height:1;} button{display:block;margin:25px auto 0;padding:6px 12px;border:1px solid #2e6da4;border-radius:4px;background:#337ab7;color:#fff;cursor:pointer;user-select:none;} .dialog-content{display:flex;padding:50px 200px;width:auto;height:auto;flex-direction:column;justify-content:center;align-items:center;} .dialog-content>div{margin-bottom:25px;font-weight:700;font-size:24px;} /********** 模态框样式 **********/ #dialog-demo{margin:auto;border:none;border-radius:4px;background:#fff;} /********** 设置模态对话框遮罩层背景色 **********/ #dialog-demo::backdrop{background:rgba(0,0,0,.6);} </style> </head> <body> <!---------- 模态对话框 ----------> <dialog id="dialog-demo"> <div class="dialog-content"> <div>孩儿立志出乡关</div> <div>学不成名誓不还</div> <div>埋骨何须桑梓地</div> <div>人生无处不青山</div> <button type="button" id="close-dialog">关闭</button> </div> </dialog> <button type="button" id="show-dialog">显示</button> <script type="text/javascript"> var dialog = document.querySelector('#dialog-demo'); // 显示模态对话框 document.querySelector('#show-dialog').onclick = function () { // 使用dialog.showModal()才显示遮罩层，使用dialog.show()则不显示 dialog.showModal(); }; // 关闭模态对话框 document.querySelector('#close-dialog').onclick = function () { dialog.close(); }; </script> </body> </html>
Copyright © 2024 码农人生. All Rights Reserved