对话框的UI组件
- 对话框的中心默认在屏幕正中，当对话框显示时，屏幕滚动时，对话框始终保持位置固定在屏幕正中，不随屏幕滚动而变化位置；或者禁止页面在有对话框出现时滚动；
- 当对话框显示时，点击对话框以外的部分，关闭对话框；
- 可以实现一个半透明的遮罩来挡住对话框外的部分；
- 提供函数显示和关闭对话框；
- 对话框的窗口大小可以是一个默认固定值，也可以是随内容变化而自适应变化，也可以是通过接口参数进行调整；
要求：
- 改写为query的实现代码；
- 封装为全部动态模式，即点击按钮自动创建对话框，而不是将html代码写在html文件中；
HTML代码
<button class="toggle">展示/隐藏</button>
<div class="modal hide" id="modal">
<div class="overlay-mask" id="overlay-mask"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">这是一个浮动层</h4>
</div>
<div class="modal-body">
<p>这是一个浮出层</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary modal-func" data-dismiss="modal">确定</button>
<button type="button" class="btn btn-default modal-cancel">取消</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
CSS代码
body {
height: 100%;
}
.overlay-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 15;
cursor: pointer;
}
.hide {
display: none!important;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
/* width: 600px; */
margin: 0 auto;
display: flex;
height: 100%;
/* border: 1px solid red; */
justify-content: center;
align-items: center;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
width: 600px;
z-index: 20;
}
.modal .close {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.modal-content {
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5)
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000
}
.modal-backdrop .fade {
filter: alpha(opacity=0);
opacity: 0
}
.modal-backdrop .in {
filter: alpha(opacity=50);
opacity: .5
}
.modal-header {
min-height: 16.43px;
padding: 15px;
border-bottom: 1px solid #e5e5e5
}
.modal-header .close {
margin-top: -2px
}
.modal-title {
margin: 0;
line-height: 1.42857143
}
.modal-body {
position: relative;
padding: 15px
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5
}
.modal-footer .btn+.btn {
margin-bottom: 0;
margin-left: 5px
}
.modal-footer .btn-group .btn+.btn {
margin-left: -1px
}
.modal-footer .btn-block+.btn-block {
margin-left: 0
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll
}
JS代码
window.onload = function() {
var data = {
title: '这是测试标题',
content: '这是测试里的内容',
type: 'default',
func: function() {
console.log("2333");
},
};
modal(data);
function modal(data) {
var config = data;
console.log(data);
var modalBox = {
modalConfig: {
title: config.title || '默认标题', // modal标题
content: config.content || '这是默认的内容', // modal内容
//type: config.type, // modal类型
func: config.func || 0, // 其他处理方法
},
//modal显示/隐藏
toggle: function() {
var modal = document.getElementById("modal");
console.log('show');
if (modal.className.indexOf('hide')) {
modal.className = 'modal';
} else {
modal.className = 'modal hide';
}
},
init: function() {
var that = this;
var modal = document.getElementById("modal");
//写入配置
document.querySelector(".modal-title").innerText = that.modalConfig.title;
document.querySelector(".modal-body").innerText = that.modalConfig.content;
document.querySelector(".modal-title").innerText = that.modalConfig.title;
//监听事件
document.querySelector(".toggle").addEventListener('click', function() {
that.toggle();
}, false);
//遮罩层隐藏
document.querySelector("#overlay-mask").addEventListener('click', function() {
document.getElementById("modal").className = 'modal hide';
}, false);
//取消事件
document.querySelector(".modal-cancel").addEventListener('click', function() {
document.getElementById("modal").className = 'modal hide';
}, false);
document.querySelector(".modal-func").addEventListener('click', function() {
//如果没有指定处理函数
if (that.modalConfig.func == 0) {
document.getElementById("modal").className = 'modal hide';
} else {
that.modalConfig.func();
document.getElementById("modal").className = 'modal hide';
}
}, false);
}
}
return modalBox.init();
}
}
