JavaScript的弹出框和Bootstrap的警告框和模态框
2021-05-14 09:29
标签：index rap mes type dialog prompt dal dial display 警告框alert （常用于消息提示，比如注册成功等等） 确认框 confirm (常用于危险性操作的确认提示。) 输入框prompt (用于弹出一个输入框，供用户输入相关信息) 警告框 可关闭的警告框 警告框中的链接 静态模态窗口 data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。 属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。 点击弹出 data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。 .modal，用来把 .fade 。当模态框被切换时，它会引起内容淡入淡出。 aria-labelledby="myModalLabel"，该属性引用模态框的标题。 不要动画效果de点击弹出 去掉fade 点击空白不会收起 添加属性data-backdrop="static" 使用JS控制模态窗口 监听模态的变化 JavaScript的弹出框和Bootstrap的警告框和模态框 标签：index rap mes type dialog prompt dal dial display 原文地址：https://www.cnblogs.com/Strugglinggirl/p/13124399.html
JavaScript弹出框
Bootstrap的警告框
class ="alert alert-warning"
role ="alert"
class="alert alert-warning" role="alert" //警告提示
//alert-info 信息提示
//alert-success 操作成功提示
//alert-danger 危险提示
class ="alert alert-warning alert-dismissible"
role ="alert"type="button" class="close"
data-dismiss="alert" aria-label="Close"aria-hidden="true" ×
href="" class="alert-link"
Bootstrap的模态框
//通过 data 属性：在控制器元素（比如按钮或者链接）上
//设置属性 data-toggle="modal"，
//同时设置 data-target="#identifier" 或 href="" 4
//来指定要切换的特定的模态框（带有 id="identifier"）。
.modal(‘show‘);手动打开模态框。
.modal(‘hide‘);手动隐藏模态框。
.modal(‘toggle‘);手动切换模态框。
aria-labelledby="myModalLabel">
...
$(function(){
$("#open").click(function(){
$("#myModal").modal(‘show‘);
});
$("#submit").click(function(){
alert("信息已经提交");
$("#myModal").modal(‘hide‘);
});
$("#toggle").click(function(){
$("#myModal").modal(‘toggle‘);
});
});
事件show.bs.modal：在调用 show 方法后触发。
事件shown.bs.modal：当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
事件hide.bs.modal：当调用 hide 实例方法时触发。
事件hidden.bs.modal：当模态框完全对用户隐藏时触发。
$(function(){
$("#myModal").on("show.bs.modal",function(){
alert("开始显示模态窗口");
});
$("#myModal").on("shown.bs.modal",function(){
alert("显示模态窗口完毕");
});
$("#myModal").on("hide.bs.modal",function(){
alert("开始隐藏模态窗口");
});
$("#myModal").on("hidden.bs.modal",function(){
alert("隐藏模态窗口完毕");
});
});
文章标题：JavaScript的弹出框和Bootstrap的警告框和模态框
文章链接：http://soscw.com/index.php/essay/85547.html