对话框 弹出层

HTML代码

  1. <button class="btn radius btn-primary size-L" onClick="modaldemo()">弹出对话框</button>

弹出层代码

  1. <div id="modal-demo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  2. <div class="modal-dialog">
  3. <div class="modal-content radius">
  4. <div class="modal-header">
  5. <h3 class="modal-title">对话框标题</h3>
  6. <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
  7. </div>
  8. <div class="modal-body">
  9. <p>对话框内容…</p>
  10. </div>
  11. <div class="modal-footer">
  12. <button class="btn btn-primary">确定</button>
  13. <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
  14. </div>
  15. </div>
  16. </div>
  17. </div>

CSS代码

  1. .fade {opacity: 0;
  2. -webkit-transition: opacity .15s linear;
  3. -o-transition: opacity .15s linear;
  4. transition: opacity .15s linear}
  5. .fade.in {opacity: 1}
  6. .modal-open {overflow: hidden}
  7. .modal{ position:fixed; left:0; top:0; right:0; bottom:0; z-index:1040; display:none; overflow:hidden;-webkit-overflow-scrolling:touch; outline:0}
  8. .modal.fade .modal-dialog{
  9. -webkit-transition: -webkit-transform .3s ease-out;
  10. -o-transition: -o-transform .3s ease-out;
  11. transition: transform .3s ease-out;
  12. -webkit-transform: translate(0,-50%);
  13. -ms-transform: translate(0,-50%);
  14. -o-transform: translate(0,-50%);
  15. transform: translate(0,-50%)}
  16. .modal.in .modal-dialog {
  17. -webkit-transform: translate(0, 0);
  18. -ms-transform: translate(0, 0);
  19. -o-transform: translate(0, 0);
  20. transform: translate(0, 0)}
  21. .modal-open .modal {overflow-x: hidden;overflow-y: auto}
  22. .modal-backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: #000}
  23. .modal-backdrop.fade {filter: alpha(opacity=0);opacity: 0}
  24. .modal-backdrop.in {filter: alpha(opacity=50);opacity: .5}
  25. .modal-dialog {position: relative;width: auto;margin: 10px}
  26. .modal-content{position: relative;background-color: #fff;border: 1px solid #999;border: 1px solid rgba(0,0,0,.2);outline: 0;
  27. -webkit-background-clip: padding-box;
  28. background-clip: padding-box;
  29. -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
  30. box-shadow: 0 3px 9px rgba(0,0,0,.5)}
  31.  
  32. .modal-header {min-height: 16.42857143px;padding: 15px;border-bottom: 1px solid #eee; position:relative}
  33. .modal-header .close{position:absolute; right:10px; top:10px}
  34. .modal-header h3,.modal-header .modal-title{margin:0; padding:10px 0; font-size:16px}
  35.  
  36. .modal-body {position:relative;padding: 15px;overflow-y:visible;word-break:break-all}
  37. .modal-form {margin-bottom: 0}
  38.  
  39. .modal-footer {padding:15px;margin-bottom: 0;text-align: right;background-color: #f5f5f5;border-top: 1px solid #eee;*zoom: 1}
  40. .modal-footer:before,.modal-footer:after {display: table;content: ""}
  41. .modal-footer:after {clear: both}
  42. .modal-footer .btn + .btn {margin-left: 5px;margin-bottom: 0}
  43. .modal-footer .btn-group .btn + .btn {margin-left: -1px}
  44. .modal-footer .btn-block + .btn-block {margin-left: 0}
  45.  
  46. .modal-scrollbar-measure {position: absolute;top: -9999px;width: 50px;height: 50px;overflow: scroll}
  47.  
  48. .radius .modal-content{ border-radius:6px}
  49. .radius .modal-footer{ border-bottom-left-radius:6px; border-bottom-right-radius:6px}
  50. @media (min-width: 768px) {
  51. .modal-dialog {width: 600px;margin: 30px auto}
  52. .modal-content {-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);box-shadow: 0 5px 15px rgba(0, 0, 0, .5)}
  53. .modal-sm {width: 300px}
  54. }
  55. @media (min-width: 992px) {
  56. .modal-lg {width: 900px}
  57. }
  58.  
  59. .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;
  60. -webkit-background-clip: padding-box;
  61. background-clip: padding-box;
  62. -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
  63. box-shadow: 0 3px 9px rgba(0,0,0,.5)}
  64. .modal-alert-info{padding:30px; text-align:center; font-size:14px; background-color:#fff}

JS代码

引入jquery.js 和 H-ui.js

模态弹出窗默认支持的自定义属性主要有:

属性 类型 默认值 描述 备注
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动画漂完成之后)触发

调用方法也非常简单:

  1. function modaldemo(){
  2. $("#modal-demo").modal("show")
  3. }
  4. function modalalertdemo() {
  5. $("body").Huimodalalert({
  6. content: '我是消息框,2秒后我自动滚蛋!',
  7. speed: 2000
  8. })
  9. }

Copyright ©2013-2022 H-ui.net All Rights Reserved.
豫ICP备19019279号-1
H-ui只是一个纯web前端的程序,没有后台和数据库,也不提供任何系统代运营服务。所有使用H-ui开发的任何系统版权都归开发者所有,造成的任何损失、不良影响,H-ui均不承担任何法律责任。
未经允许,禁止转载、抄袭、镜像
用心做站,做不一样的站