点击按钮弹出模态框实现

来源：互联网发布：游戏编程软件有哪些编辑：程序博客网时间：2024/06/05 21:03

点击按钮弹出模态框的实现：

html：

<!DOCTYPE html><html><head>    <meta charset="utf-8"><title>模态框</title><link rel="stylesheet" type="text/css" href="modalBox.css"></head><body>    <!-- 触发按钮 -->    <button id="triggerBtn">模态框</button>    <!-- 模态框 -->    <div id="myModal" class="modal">        <div class="modal-content">            <div class="modal-header">                <h2>头部</h2>                <span id="closeBtn" class="close">×</span>            </div>            <div class="modal-body">                <p>这是一个模态框！</p>                <p>喜欢就点个赞吧！</p>            </div>            <div class="modal-footer">                <h3>尾部</h3>            </div>        </div>    </div><script type="text/javascript" src="modalBox.js"></script></body></html>

js：

(function() {/*建立模态框对象*/var modalBox = {};/*获取模态框*/modalBox.modal = document.getElementById("myModal");    /*获得trigger按钮*/modalBox.triggerBtn = document.getElementById("triggerBtn");    /*获得关闭按钮*/modalBox.closeBtn = document.getElementById("closeBtn");/*模态框显示*/modalBox.show = function() {console.log(this.modal);this.modal.style.display = "block";}/*模态框关闭*/modalBox.close = function() {this.modal.style.display = "none";}/*当用户点击模态框内容之外的区域，模态框也会关闭*/modalBox.outsideClick = function() {var modal = this.modal;window.onclick = function(event) {            if(event.target == modal) {            modal.style.display = "none";            }}}    /*模态框初始化*/modalBox.init = function() {var that = this;this.triggerBtn.onclick = function() {            that.show();}this.closeBtn.onclick = function() {that.close();}this.outsideClick();}modalBox.init();})();

css：

/*模态框*/.modal {    display: none; /* 默认隐藏 */    position: fixed; /* 根据浏览器定位 */    z-index: 1; /* 放在顶部 */    left: 0;    top: 0;    width: 100%; /* 全宽 */    height: 100%; /* 全高 */    overflow: auto; /* 允许滚动 */    background-color: rgba(0,0,0,0.4); /* 背景色 */}/*模态框内容*/.modal-content {    display: flex; /*采用flexbox布局*/    flex-direction: column; /*垂直排列*/    position: relative;    background-color: #fefefe;    margin: 15% auto; /*距顶部15% 水平居中*/    padding: 20px;    border: 1px solid #888;    width: 80%;    animation: topDown 0.4s; /*自定义动画，从模态框内容上到下出现*/}@keyframes topDown {    from {top: -300px; opacity: 0}    to {top: 0; opacity: 1}}/*模态框头部*/.modal-header {    display: flex; /*采用flexbox布局*/    flex-direction: row; /*水平布局*/    align-items: center; /*内容垂直居中*/    justify-content: space-between; }/*关闭X 样式*/.close {    color: #aaa;    float: right;    font-size: 28px;    font-weight: bold;}.close:hover {    color: black;    text-decoration: none;    cursor: pointer;}

阅读全文

0 0