Bootstrap警告框js插件

经常会在bootstrap项目中遇到警告框、弹出提示层、弹出模态框组件等等场景应用。
使用前准备：

插件使用之前，请先导入如下文件：
jquery.min.js
bootstrap-alert.js
bootstrap.css

它的警告框插件效果很多！比如常见的调用方式：

通过调用class类名

通过javascript调用

下面讲一下常用的实现方式。

效果1：（调用class类名）

截图：

代码如下：

<div class="alert alert-danger fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>警告框标题</strong> 提交失败！
</div>

效果2：（`添加用户行为`：通过`javascript调用`）

此方法：把警告框和弹出模态框插件，捆绑应用！

截图：

代码如下：

<div class="alert alert-danger fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>警告框标题</strong>提交失败！
</div><!--模态框组件-->
<div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h3>提示</h3></div><div class="modal-body"><p>确定要关闭警告框信息？</p></div><div class="modal-footer"><button class="btn btn-info" data-dismiss="modal">关闭</button></div></div></div>
</div>
<!--添加用户行为-->
<script type="text/javascript">$(function(){$(".close").click(function(){$(this).alert("close");});$(".alert").on("close.bs.alert",function(e){$("#myModal").modal();});});
</script>

实际生产中，可根据需求自定义定制。

以上就是关于“ Bootstrap警告框、弹出提示层、模态框的js插件效果总结 ” 的全部内容。

Bootstrap警告框、弹出提示层、模态框的js插件效果总结相关推荐

鼠标提上去弹出提示层（定位）
希望的效果如图: 网上找了各纯css的做了下修改: 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
bootstrap模态框弹出居中显示
在项目中,有几个使用bootstrap模态框弹出问题,在单页面上是居中显示,但是嵌套在别的iframe中,弹出的位置在靠近顶部的位置. 查阅了一些资料,有几种解决方案,1修改bootstrap的js文 ...
bootstrap 模态框弹出就消失了_bootstrap模态框消失问题的解决方法
这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不 ...
弹出提示框自动消失
我们在进行增.删.改.查的时候,很多时候都需要一个提示信息以表明所做操作的成功等状况.有些人喜欢用alert()来提示,这不太人性化,因为alert()弹出来的提示框必须点确定才能继续进行其它操作.我 ...
JS的三种弹出提示框(alert、confirm、prompt)
三种弹出提示框 1.alert() 2.confirm() 3.prompt() 1.alert() 方法会弹出一个警告框,只有确定按钮 alert('这是个警告框') 2.comfim() 会弹出一 ...
网页弹出提示框3秒后自动消失
页面弹出提示框3秒后自动消失 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
微信小程序之弹出提示框确认取消按钮以及在该api内的方法中不能使用setData的问题！
首先,我们来介绍一下弹出提示框: wx.showModal({title: '提示',content: '这是一个模态弹窗',success (res) {if (res.confirm) {cons ...
JavaScript的三种弹出提示框(alert、confirm、prompt)
三种提示框 alert () confirm() prompt () alert () alert()方法是显示一条弹出提示消息和确认按钮的警告框. 需要注意的是 :alert()是一个阻塞的函数,如 ...

Bootstrap警告框、弹出提示层、模态框的js插件效果总结

Bootstrap警告框js插件

效果1：（调用class类名）

截图：

代码如下：

效果2：（`添加用户行为`：通过`javascript调用`）

截图：

代码如下：

Bootstrap警告框、弹出提示层、模态框的js插件效果总结相关推荐

最新文章

热门文章

Bootstrap警告框、弹出提示层、模态框的js插件效果总结

Bootstrap警告框js插件

效果1：（调用class类名）

截图：

代码如下：

效果2：（添加用户行为：通过javascript调用）

截图：

代码如下：

Bootstrap警告框、弹出提示层、模态框的js插件效果总结相关推荐

最新文章

热门文章

效果2：（`添加用户行为`：通过`javascript调用`）