最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js模态对话框使用方法详解
时间:2017-04-11 编辑:简简单单 来源:一聚教程网
模态框(Modal Dialogue Box)也可叫做模态对话框,或者对话框,当一个模态框被打开时,用户可以与该对话框进行交互,点击关闭按钮可关闭该模态框!
功能实现:
1. 页面上有一个按钮,用于打开模态框,模态框默认隐藏;
2. 用户点击按钮,可打开模态框;用户点击模态框中的关闭或者点击页面其他地方可关闭该模态框
✦ 点击页面其他地方,关闭模态框,可用window.onclick事件
✦ 给关闭按钮绑定点击事件,按钮被点击,模态框Modal添加样式display:none;
✦ 给button按钮绑定点击事件,当按钮被点击时,模态框Modal添加样式display:block;
✦ 先获取页面上的button按钮,关闭按钮,以及模态框Modal
代码实现:
代码如下 | 复制代码 |
/* 弹窗 (background) */ .modal { display: none; /* 默认隐藏 */ position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
/* 弹窗内容 */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 35%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s }
/* 添加动画 */ @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} }
@keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} }
/* 关闭按钮 */ .close { color: white; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
.modal-header { padding: 2px 16px; background-color: #5587A2; color: white; }
.modal-body {padding: 2px 16px;}
.modal-footer { padding: 2px 16px; background-color: #5587A2; text-align: right; color: white; }
弹窗头部
弹窗内容...
弹窗内容...
弹窗底部
// 获取弹窗 var modal = document.getElementById('myModal');
// 打开弹窗的按钮对象 var btn = document.getElementById("myBtn");
// 获取 元素,用于关闭弹窗 that closes the modal var span = document.getElementsByClassName("close")[0];
// 点击按钮打开弹窗 btn.onclick = function() { modal.style.display = "block"; }
// 点击 (x), 关闭弹窗 span.onclick = function() { modal.style.display = "none"; }
// 在用户点击其他地方时,关闭弹窗 window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }
|
-
上一个: javascript获取以及设置光标位置
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28