1200字范文 > 弹出框（bootStrap模态框 bootbox dbailog）

弹出框（bootStrap模态框 bootbox dbailog）

时间：2023-10-07 15:02:44

弹出框（bootStrap模态框、bootbox、dbailog）

最近这几天项目里要用模态框，我找了好多，开始我们项目用的是dbailog的提示框，在我想使用bootstrap的模态框时，两者的js发生了冲突，出现闪退的情况。最后决定把dbailog换成bootbox.js。接下来我们来谈谈他们的使用。

一、bootStrap模态框

这个是菜鸟教程中的bootStrap模态框的链接，

/bootstrap/bootstrap-modal-plugin.html

<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal fade" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" data-dismiss="modal" aria-hidden="true" class="close">><span aria-hidden="true">×</span></button></button><h4 id="myModalLabel" class="modal-title">修改密码</h4></div><span class="panel-body no-padding"><br><div class="form-group"><label class="col-sm-2 control-label">新密码</label><div class="col-sm-10"><input class="form-control input_userName" style="width:60%" id="newpassword" type="text"th:maxlen="100" value="" name="newpassword"> *必填<span id="newpassMsg">请输入新密码(英文字母数字组合)</span><span id="newpassErr" style="color: red"></span></div></div><div class="form-group"><label class="col-sm-2 control-label">确认密码</label><div class="col-sm-10"><input class="form-control" style="width:60%" id="repeatpassword" type="text"th:maxlen="100" value="" name="repeatpassword"> *必填<span id="passwd">请再次输入密码(英文字母数字组合)</span><span id="passwdErr" style="color: red"></span></div></div><div class="form-group"><label class="checkbox-inline"><button type="button" class="btn btn-primary" onclick="save()">保存</button><button type="button" class="btn btn-warning" id="btnReturn" data-dismiss="modal">取消</button></label></div></span></div></div>

我在网上找一般只有按钮触发的事件，接下来我把button和标签的触发事件也贴出来

<li><a href="#myModal" data-toggle="modal" data-target="#myModal" ><i class="lnr lnr-book"></i> <span >修改密码</span></a></li><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#subModal">修改</button>

我把模态框的图贴出来，效果就是这样

二、modal打开：

2.1、静态打开：通过data属性打开隐藏模态框

设置按钮button的data-toggle:“modal”（以模态框的形式打开），data-target:"#myModal"（设置为modal的id）

2.2、动态打开：以jquery代码为例

$("#myModal").modal({remote:"test/test.jsp";//可以填写一个url，会调用jquery load方法加载数据backdrop:"static";//指定一个静态背景，当用户点击背景处，modal界面不会消失keyboard:true;//当按下esc键时，modal框消失})

remote处可以填写jsp路径或者html路径，用来给modal框注入内容

2.3、动态打开事件：

在modal框加载同时，提供几个方法用来控制modal框

$("#myModal").on("loaded.bs.modal",function{//在模态框加载的同时做一些动作});$("#myModal").on("show.bs.modal",function{//在show方法后调用});$("#myModal").on("shown.bs.modal",function{//在模态框完全展示出来做一些动作});$("#myModal").on("hide.bs.modal",function{//hide方法后调用});$("#myModal").on("hiden.bs.modal",function{//监听模态框隐藏事件做一些动作});

一些说明：

1、**Trigger的部分 **为打开模态框，需要一个button或者link，需要包括2个data-*属性：data-toggle="modal"表示打开一个模态框data-target="#myModal"表示model的id2、**Modal的部分**<div>模态必须有一个id的值与data-target一致类.modal，用来把 <div> 的内容识别为模态框类.fade，当模态框被切换时，它会引起内容淡入淡出role="dialog"提高了使用屏幕阅读器的人的可访问性.modal-dialog设置模态的适当宽度和边距modal-header 是为模态窗口的头部定义样式的类modal-body用于为模态窗口的主体设置样式modal-footer用于为模态窗口的底部设置样式data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口模态框的大小可通过modal-sm和modal-lg，设置模态框的大小<div class="modal-dialog" role="document"><div class="modal-dialog modal-lg" role="document"><div class="modal-dialog modal-full" role="document">