改章节是一篇关于微软模态对话框的帖子

0x03 事件

你大概感兴趣的小说:

  • Bootstrap 模态对话框只加载三次 remote
    数据的一揽子消除办法
  • Bootstrap模态对话框的大致利用
  • Bootstrap3
    几个模态对话框不或者出示的缓和方案
  • BootStrap3中模态对话框的应用
  • Bootstrap基本插件学习笔记之模态对话框(16)
  • 据书上说Bootstrap模态对话框只加载叁遍 remote
    数据的化解措施
  • Bootstrap模态对话框中显得动态内容的措施
  • Bootstrap模态对话框用法轻易示例
  var Modal = function (element, options) {      this.options = options      this.$element = $(element)        .delegate('[data-dismiss="modal"]:first', 'click.dismiss.modal', $.proxy(this.hide, this))      this.options.remote && this.$element.find('.modal-body').load(this.options.remote)    }
<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <style>
  .col-center-block{
   float: none;
   display: block;
   margin-left: auto;
   margin-right: auto;
  }
 </style>
 <title>js加载例子</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>js加载模态对话框</h1>
 </div>
 <div>
  <button type="button" class="btn btn-lg btn-primary btn-myModal" data-toggle="modal">弹出对话框</button>
  <div id="myModal" class="modal fade">
   <div class="modal-dialog" style="width: 20%">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">用户登录</h4>
     </div>
     <div class="modal-body">
      <div>
       <form>
        <div class="form-group">
         <label class="control-label" for="UserName">用户名</label>
         <input type="text" class="form-control" id="UserName" placeholder="用户名">
        </div>
        <div class="form-group">
         <label class="control-label" for="Password">密码</label>
         <input type="password" class="form-control" id="Password" placeholder="密码">
        </div>
        <div class="form-group">
         <label>
          <input type="checkbox"> 下次自动登录
         </label>
         <a href="#" class="pull-right">忘记密码</a>
        </div>
        <div class="form-group">
         <button type="submit" class="btn btn-primary form-control">登录</button>
        </div>
       </form>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
<script>
 $(function () {
  $(".btn-myModal").click(function () {
   $("#myModal").modal({
    keyboard:true,
//    remote:"../Alerts.html"
   })
  })
  $("#myModal").on("hidden.bs.modal",function () {
//   alert('test');
  })
 })
</script>
</body>
</html>

<a class=”mzDialog” href=”#” data-remote=”test.html”
data-mtitle=”modal1″ data-id=”m1″ data-width=”600″
data-okEvent=”ok()”>弹窗demo</a>


Bootstrap插件使用教程

2.通过js初始化
$(“.mzDialog”).mzDialog(); 不健全的地点及bug,这里只是学习参照他事他说加以调查,本人能够修改完善
1、bootstrap-mzDialog
插件一时只有2个开关,撤消和规定,暂不帮忙自定义按键,本身能够修改源代码增添此作用。
2、只好选用html
data-*主意定义,不协助js起初化时陈设参数,本人能够修改源码扩大此作用。
3、宽度和惊人提出并非选取比例
4、注意这里回调函数必需是字符串格式,如okEvent:”ok()”
这里ok函数式自个儿定义的函数,切记要带();
js源码:

    

Bootstrap自带了大多中坚的插件,包涵模态对话框、标签切换、Tooltip提示工具等。首先来总计下模态对话框的使用。

复制代码 代码如下:

    Bootstrap用十分少说了。Bootstrap自带有模态对话框插件,用使起来很便方,只要遵照如下格式定义html,然后用js发触,恐怕用内定data属性的形似html素元来发触,后者的身体力行如下:

当模态框完全对用户隐藏时,就能调用实践这段JS代码。

如上便是本文的全体内容,希望对我们的上学抱有辅助,也可望大家多多支持脚本之家。

查看Bootstrap 2.3.1版(未压缩)的源码,在872行能够找到如下数函,它定义了模态对话框类的结构数函:

$("#myModal").on("hidden.bs.modal",function () {
  alert('test');
 })

在运用bootstrap
模态对话框时需求在页面写对话框html,纵然三个页面有好些个地点要求对话框,那表示须要写七个,以为很辛勤,平常不太习贯bootstrap
模态对话框这种艺术,所以做了个简易包装及扩充,扩张了自定义标题,宽度和冲天,并依照宽高居中展现。

    

0x02 JS情势加载

/*------------------------------------------------------
 *封装的dialog插件,基于bootstrap模态窗口的简单扩展
 *作者:muzilei
 *email:530624206@qq.com
----------------------------------------------------------*/
(function ($) {
$.fn.mzDialog = function () {
   var defaults={
   id:"modal",//弹窗id
  title:"dialog",//弹窗标题
  width:"600",//弹窗宽度,暂时不支持%
  height:"500",//弹窗高度,不支持%
  backdrop:true,//是否显示遮障,和原生bootstrap 模态框一样
  keyboard:true,//是否开启esc键退出,和原生bootstrap 模态框一样
  remote:"",//加载远程url,和原生bootstrap 模态框一样
  openEvent:null,//弹窗打开后回调函数
  closeEvent:null,//弹窗关闭后回调函数
  okEvent:null//单击确定按钮回调函数
 };

 //动态创建窗口
 var creatDialog={
 init:function(opts){
  var _self=this;

  //动态插入窗口
  var d=_self.dHtml(opts);
  $("body").append(d);

  var modal=$("#"+opts.id);

  //初始化窗口
  modal.modal(opts);

  //窗口大小位置
  var h=modal.height()-modal.find(".modal-header").outerHeight()-modal.find(".modal-footer").outerHeight()-5;
   modal.css({'margin-left':opts.width/2*-1,'margin-top':opts.height/2*-1,'top':'50%'}).find(".modal-body").innerHeight(h);

  modal
  //显示窗口
  .modal('show')
  //隐藏窗口后删除窗口html
  .on('hidden', function () {
   modal.remove();
   $(".modal-backdrop").remove();
   if(opts.closeEvent){
   eval(opts.closeEvent);
   }
   })
  //窗口显示后 
  .on('shown', function () {

   if(opts.openEvent){
   eval(opts.openEvent);
   }

   //绑定按钮事件
   $(this).find(".ok").click(function(){
    if(opts.okEvent){
    var ret=eval(opts.okEvent);
    if(ret){
     modal.modal('hide');
     }
    }
    });

   });
  },
 dHtml:function(o){
  return '<div id="'+o.id+'" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:'+o.width+'px;height:'+o.height+'px;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">'+o.title+'</h3></div><div class="modal-body"><p>正在加载...</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">取消</button><button class="btn btn-primary ok">确定</button></div></div>';
  }
 };

  return this.each(function () {
     $(this).click(function(){
  var opts = $.extend({},defaults,{
   id:$(this).attr("data-id"),
   title:$(this).attr("data-mtitle"),
   width:$(this).attr("data-width"),
   height:$(this).attr("data-height"),
   backdrop:$(this).attr("data-backdrop"),
   keyboard:$(this).attr("data-keyboard"),
   remote:$(this).attr("data-remote"),
   openEvent:$(this).attr("data-openEvent"),
   closeEvent:$(this).attr("data-closeEvent"),
   okEvent:$(this).attr("data-okEvent")
  });

   creatDialog.init(opts);
  });
  });

};

})(jQuery);

小说甘休给我们大饱眼福下程序猿的有的笑话语录:
雅虎最专长的不是开展新职业,是关门旧业务。

Bootstrap学习课程

默许属性:
id:”modal”,//弹窗id
title:”dialog”,//弹窗标题
width:”600″,//弹窗宽度,近年来不协理%
height:”500″,//弹窗中度,不支持%
backdrop:true,//是或不是出示遮障,和原生bootstrap 模态框同样
keyboard:true,//是不是开启esc键退出,和原生bootstrap 模态框一样
remote:””,//加载远程url,和原生bootstrap 模态框同样
open伊芙nt:null,//弹窗张开后回调函数
closeEvent:null,//弹窗关闭后回调函数
ok伊芙nt:null//单击明确开关回调函数
运用办法:
1.通过html data-*性格定义

<div id="myModal"  data-backdrop="static">    <div >      <button type="button"  data-dismiss="modal" aria-hidden="true">x</button>      <h3>对话框标题</h3>    </div>    <div >      <p>One fine body…</p>    </div>    <div >      <a   >关闭</a>      <a   >Save changes</a>    </div>  </div>

意义如下:

  var Modal = function (element, options) {      this.options = options      this.$element = $(element)        .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))      this.options.remote && this.$element.find('.modal-body').load(this.options.remote)    }

Bootstrap自带了好些个JQuery插件,给用户做前端开拓提供了十分的大的方便人民群众。对于每四个插件,有2种援引格局:一是单独援用,即接纳Bootstrap的单独*.js文件,这种方法索要专注的是有个别插件和CSS组件大概借助别的插件,所以单独援用的时候,须要弄清楚这种富含关系一并援用;二是直接援用完整的bootstrap.js或然压缩版的bootstrap.min.js,需求专注的是不能够同时引述那2个文件。

Modal象对的构造在模态对话框示显从前行进。大家用不关切体具的落到实处细节,只要看看码代第3-4将在模态对话框的“隐藏”方法(hide)托委给带有data-dismiss=”modal”属性的素元的click事件,艰深点说就是:找到父模态对话框中装有带data-dismiss=”modal”属性的“关闭”素元,对其钦命多个click事件管理数函,在那些数函中关闭该模态对话框。当子页面中回顾“关闭”素元时,它也会被付与父对话框的关门作操,由此点击子页面(子模态对话框)的“关闭”素元就顺手把父模态对话框给关闭了!找到了难题的原由,我们只要根据须求,修改响应的择选器可即。依照我遭受的境况,只要在择选器后边加多二个:first过滤器,意为择选父模态对话框中的第贰个“关闭”素元可即:

$('#myModal').on('hide.bs.modal', function () {
 // 执行一些动作...
})

中间定义了data-dismiss=”modal”属性的钮按用于关闭该模态对话框,小编姑且称其为“关闭”钮按。一般意况下,那样的私下认可设置未有其余难题。小编在项目中遇见的难点是:作者计设的”modal-body”面里的容内是一个模板,态动用调分裂的子页面容内;当子页面中包蕴一另个子模态对话框的概念时,难题就涌现了。子模态对话框弹出未来,点击其“关闭”钮按,会顺带着把父模态对话框给关闭伤心。要决解那样的难点,大概说是Bootstrap的贰个bug,就供给查阅源码了。

(1)把内容作为模态框激活。接受贰个可选的选料对象:

从那之后,难点决解。

$('#myModal').on('show.bs.modal', function () {
 // 执行一些动作...
})

    每一日一道理
信心是高大大厦的学富五车,未有它,就只是一群散乱的砖瓦;信念是滔滔大江的河道,未有它,就唯有一片泛滥的波浪;信念是能够烈焰的引星,未有它,就唯有一把严寒的柴把;信念是远洋巨轮的主机,未有它,就只剩余瘫痪的巨架。

(1)使用模态窗口,必要有某种触发器,可以动用开关或链接。这里大家选拔的是按键。
(2)data-target=”#myModal” 是想要在页面上加载的模态框的靶子。
(3)在模态框中必要留神两点:一是.modal,用来把 <div>
的剧情识别为模态框;二是 .fade
class。当模态框被切换时,它会唤起内容淡入淡出。
(4)<div class=”modal-header”>,modal-header
是为模态窗口的头顶定义样式的类。
(5)class=”close”,close 是贰个 CSS
class,用于为模态窗口的关闭按键设置样式。
(6)data-dismiss=”modal”,是贰个自定义的 HTML5 data
属性。在此处它被用来关闭模态窗口。
(7)class=”modal-body”,是 Bootstrap CSS 的多个 CSS
class,用于为模态窗口的侧入眼设置样式。
(8)class=”modal-footer”,是 Bootstrap CSS 的叁个 CSS
class,用于为模态窗口的最底层安装样式。
(9)data-toggle=”modal”,HTML5 自定义的 data 属性 data-toggle
用于张开模态窗口。

除了上边通过品质方式加载外,仍是可以透过JS情势加载模态对话框,上边是贰个用户登陆分界面包车型地铁归纳完毕:

图片 1

你恐怕感兴趣的小说:

  • 打包的dialog插件
    基于bootstrap模态对话框的简易扩大
  • Bootstrap 模态对话框只加载贰次 remote
    数据的完美解决办法
  • Bootstrap模态对话框的简练利用
  • Bootstrap3
    三个模态对话框不能够出示的消除方案
  • BootStrap3中模态对话框的使用
  • 基于Bootstrap模态对话框只加载三回 remote
    数据的缓和方式
  • Bootstrap模态对话框中显得动态内容的措施
  • Bootstrap模态对话框用法轻易示例

模态框(Modal)是覆盖在父窗体上的子窗体。平常,目标是显得来自多个单身的源的从头到尾的经过,能够在不偏离父窗体的情形下有一点点相互。子窗体可提供音讯、交互等。Bootstrap
Modals(模态框)是利用定制的JQuery插件创造的。它可以用来创设模态窗口充足用户体验,可能为用户拉长实用效用。
上边是三个主导样式:

(1)show.bs.modal
在调用 show 方法后触发:

$("#myModal").modal('toggle') //手动打开模态框。
$("#myModal").modal('hide') //手动隐藏模态框。

地点用户登入的事例中事件部分代码:

以上正是本文的全部内容,希望对我们的读书抱有支持,也期望我们多多支持脚本之家。

$("#myModal").modal({
keyboard:true,
})
$('#myModal').on('shown.bs.modal', function () {
// 执行一些动作...
})
$('#myModal').on('hidden.bs.modal', function () {
 // 执行一些动作...
})

(3)hide.bs.modal
当调用 hide 实例方法时接触:

0x01着力样式

图片 2

(2)状态切换

Bootstrap模态对话框还定义了轩然大波,通过“钩子”的方法调用:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>模态对话框</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>模态对话框基本</h1>
 </div>
 <button type="button" id="Open" class="btn btn-primary btn-lg btn-mymodal" data-toggle="modal"
   data-target="#myModal">
  打开模态框
 </button>
 <div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h4 class="modal-title" id="myModalLabel">标题</h4>
    </div>
    <div class="modal-body">内容内容内容内容</div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
     <button type="button" class="btn btn-primary">提交</button>
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

(2)shown.bs.modal
当模态框对用户可知时接触(将静观其变 CSS 过渡效果达成):

Bootstrap实战教程

功用如下:

(4)hidden.bs.modal
当模态框完全对用户隐藏时触发:

假设大家还想深切学习,能够点击这里进展学习,再为我们附3个杰出的专项论题:

几点表明:

上面包车型大巴例证包括了JS加载modal的经过,也席卷了安装模态对话框宽度、响应事件等剧情。modal方法结合一些参数来完结特殊效果:

相关文章