对话框 弹出层
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
HTML
SCSS
CSS
JS
<div id="hui-modal-demo" class="hui-modal fade middle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="hui-modal-dialog"> <div class="hui-modal-content radius"> <div class="hui-modal-header"> <h3 class="hui-modal-title">对话框标题</h3> <a class="hui-modal-close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a> </div> <div class="hui-modal-body"> <p>对话框内容…</p> </div> <div class="hui-modal-footer"> <button class="hui-btn hui-btn-primary">确定</button> <button class="hui-btn" data-dismiss="modal" aria-hidden="true">关闭</button> </div> </div> </div> </div>
@mixin transition($v) { transition: $v; } @mixin transform($v) { transform: $v; } @mixin borderRadius($v) { -ms-border-radius: &v; border-radius: $v; } .fade { opacity: 0; @include transition(opacity .15s linear); &.in { opacity: 1 } } .hui-modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1040; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; &.fade .hui-modal-dialog { @include transition(transform .3s ease-out); @include transform(translate(0, -50%)); } &.in .hui-modal-dialog { @include transform(translate(0, 0)); } .hui-modal-dialog { position: relative; margin: 10px; .hui-modal-content { position: relative; background-color: #fff; border: 1px solid #999; outline: 0; -webkit-background-clip: padding-box; background-clip: padding-box; @include boxShadow(0 3px 9px rgba(0, 0, 0, .5)); .hui-modal-header { min-height: 16.42857143px; padding: 15px; border-bottom: 1px solid #eee; position: relative; .hui-modal-close { position: absolute; right: 10px; top: 10px; font-size: 20px; color: #000; text-shadow: 0 1px 0 #fff; opacity: 0.2; filter: alpha(opacity=20); &:hover, &:focus { color: #000; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40) } } h3, .hui-modal-title { margin: 0; padding: 10px 0; font-size: 16px; } } .hui-modal-body { position: relative; padding: 15px; overflow-y: visible; word-break: break-all; .hui-modal-form { margin-bottom: 0; } } .hui-modal-footer { padding: 15px; margin-bottom: 0; text-align: right; background-color: #f5f5f5; border-top: 1px solid #eee; *zoom: 1; &:before, &:after { display: table; content: ""; } &:after { clear: both; } .hui-btn+.hui-btn { margin-left: 5px; margin-bottom: 0; } .hui-btn-group .hui-btn+.hui-btn { margin-left: -1px; } .hui-btn-block+.hui-btn-block { margin-left: 0; } } } } &.radius{ .hui-modal-content { @include borderRadius(6px); .hui-modal-footer { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } } } .hui-modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; &.fade { filter: alpha(opacity=0); opacity: 0; } &.in { filter: alpha(opacity=50); opacity: .5 } } .hui-modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } &.middle .hui-modal-dialog { position: absolute; margin: 10px; left: 0; right: 0; top: 50%; } &.fade.middle .hui-modal-dialog { @include transform(translate(0, -100%)); } &.in.middle .hui-modal-dialog { @include transform(translate(0, -50%)); } } .hui-modal-open { overflow: hidden; } .hui-modal-open .hui-modal { overflow-x: hidden; overflow-y: auto; } /*上下居中*/ @media (min-width: 768px) { .hui-modal-dialog { width: 600px; margin: 30px auto; .hui-modal-content { @include boxShadow(0 5px 15px rgba(0, 0, 0, .5)); } } .hui-modal.middle .hui-modal-dialog { margin: 10px auto; } .hui-modal-sm { width: 300px; } } @media (min-width: 992px) { .hui-modal-lg { width: 900px; } } .hui-modal-alert { position: fixed; right: auto; bottom: auto; width: 300px; left: 50%; margin-left: -150px; top: 50%; margin-top: -30px; z-index: 9999; background-color: #fff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); outline: 0; -webkit-background-clip: padding-box; background-clip: padding-box; @include boxShadow(0 3px 9px rgba(0, 0, 0, .5)); .hui-modal-alert-info { padding: 30px; text-align: center; font-size: 14px; background-color: #fff; } } .loading { height: 50px; background: url(../images/loading/loading-b.gif) no-repeat center; } .mask { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); @include transition(all 0.3s ease-in); } * html .mask { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } .mask_box { background-image: none; display: none; z-index: 99 } .hover .mask_box { position: absolute; bottom: 0; left: 0; display: block; background-color: rgba(0, 0, 0, 0.3); text-align: left; } .hui-modal-open{ .hui-dropdown-menu { z-index: 2050; } .hui-dropdown.open { z-index: 2050; } .popover { z-index: 2060; } .tooltip { z-index: 2070; } }
.fade { opacity: 0; transition: opacity 0.15s linear; } .fade.in { opacity: 1; } .hui-modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1040; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; } .hui-modal.fade .hui-modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50%); } .hui-modal.in .hui-modal-dialog { transform: translate(0, 0); } .hui-modal .hui-modal-dialog { position: relative; margin: 10px; } .hui-modal .hui-modal-dialog .hui-modal-content { position: relative; background-color: #fff; border: 1px solid #999; outline: 0; -webkit-background-clip: padding-box; background-clip: padding-box; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header { min-height: 16.42857143px; padding: 15px; border-bottom: 1px solid #eee; position: relative; } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header .hui-modal-close { position: absolute; right: 10px; top: 10px; font-size: 20px; color: #000; text-shadow: 0 1px 0 #fff; opacity: 0.2; filter: alpha(opacity=20); } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header .hui-modal-close:hover, .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header .hui-modal-close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header h3, .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header .hui-modal-title { margin: 0; padding: 10px 0; font-size: 16px; } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-body { position: relative; padding: 15px; overflow-y: visible; word-break: break-all; } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-body .hui-modal-form { margin-bottom: 0; } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer { padding: 15px; margin-bottom: 0; text-align: right; background-color: #f5f5f5; border-top: 1px solid #eee; *zoom: 1; } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer:before, .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer:after { display: table; content: ""; } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer:after { clear: both; } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer .hui-btn + .hui-btn { margin-left: 5px; margin-bottom: 0; } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer .hui-btn-group .hui-btn + .hui-btn { margin-left: -1px; } .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer .hui-btn-block + .hui-btn-block { margin-left: 0; } .hui-modal.radius .hui-modal-content { border-radius: 6px; } .hui-modal.radius .hui-modal-content .hui-modal-footer { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .hui-modal .hui-modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; } .hui-modal .hui-modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0; } .hui-modal .hui-modal-backdrop.in { filter: alpha(opacity=50); opacity: 0.5; } .hui-modal .hui-modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } .hui-modal.middle .hui-modal-dialog { position: absolute; margin: 10px; left: 0; right: 0; top: 50%; } .hui-modal.fade.middle .hui-modal-dialog { transform: translate(0, -100%); } .hui-modal.in.middle .hui-modal-dialog { transform: translate(0, -50%); } .hui-modal-open { overflow: hidden; } .hui-modal-open .hui-modal { overflow-x: hidden; overflow-y: auto; } /*上下居中*/ @media (min-width: 768px) { .hui-modal-dialog { width: 600px; margin: 30px auto; } .hui-modal-dialog .hui-modal-content { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .hui-modal.middle .hui-modal-dialog { margin: 10px auto; } .hui-modal-sm { width: 300px; } } @media (min-width: 992px) { .hui-modal-lg { width: 900px; } } .hui-modal-alert { position: fixed; right: auto; bottom: auto; width: 300px; left: 50%; margin-left: -150px; top: 50%; margin-top: -30px; z-index: 9999; background-color: #fff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.2); outline: 0; -webkit-background-clip: padding-box; background-clip: padding-box; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); } .hui-modal-alert .hui-modal-alert-info { padding: 30px; text-align: center; font-size: 14px; background-color: #fff; } .loading { height: 50px; background: url(../images/loading/loading-b.gif) no-repeat center; } .mask { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); transition: all 0.3s ease-in; } * html .mask { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } .mask_box { background-image: none; display: none; z-index: 99; } .hover .mask_box { position: absolute; bottom: 0; left: 0; display: block; background-color: rgba(0, 0, 0, 0.3); text-align: left; } .hui-modal-open .hui-dropdown-menu { z-index: 2050; } .hui-modal-open .hui-dropdown.open { z-index: 2050; } .hui-modal-open .popover { z-index: 2060; } .hui-modal-open .tooltip { z-index: 2070; }
$("#hui-modal-demo").modal({ show: true, backdrop: true, keyboard: true });
模态弹出窗默认支持的自定义属性主要有:
属性 | 类型 | 默认值 | 描述 | 备注 |
---|---|---|---|---|
backdrop | 布尔值 | true | 点击背景是否关闭模态框,true关闭,false不关闭 | 等价于data-backdrop |
keyboard | 布尔值 | true | 按ESC是否关闭模态框,true关闭,false不关闭 | 等价于data-keyboard |
show | 布尔值 | true | 初始化时弹出框是否显示 | 等价于data-show |
参数
参数 | 使用方法 | 描述 |
---|---|---|
toggle | $(“#mymodal”).modal(“toggle”) | 触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示 |
show | $(“#mymodal”).modal(“show”) | 触发时,显示模态弹出窗 |
hide | $(“#mymodal”).modal(“hide”) | 触发时,关闭模态弹出窗 |
事件设置
模态弹出窗还支持四种类型的事件,分别是模态弹出窗的弹出前、弹出后,关闭前、关闭后,具体描述如下:
事件类型 | 描述 |
---|---|
show.bs.modal | 在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性 |
shown.bs.modal | 该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件 |
hide.bs.modal | 在hide方法调用时(但还未关闭隐藏)立即触发 |
hidden.bs.modal | 该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发 |
调用方法也非常简单:
function modaldemo(){ $("#hui-modal-demo").modal("show") } function modalalertdemo() { $("body").Huimodalalert({ content: '我是消息框,2秒后我自动滚蛋!', speed: 2000 }) }