使用Bootstrap弹出框和警告框插件详解
发表于:2024-11-28 作者:热门IT资讯网编辑
编辑最后更新 2024年11月28日,今天小编给大家分享的是如何使用Bootstrap弹出框和警告框插件,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,话不多说,一起往下看吧。一.弹出框弹出框即点击一个元素弹出一个包
今天小编给大家分享的是如何使用Bootstrap弹出框和警告框插件,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,话不多说,一起往下看吧。
一.弹出框弹出框即点击一个元素弹出一个包含标题和内容的容器。//基本用法//JavaScript 初始化$('button').popover();弹出框插件有很多属性来配置提示的显示,具体如下:
$('button').popover({ container : 'body', viewport : {selector : '#view', padding : 10,}});通过 JavaScript 执行的方法有四个。//显示$('button').popover('show');//隐藏$('button').popover('hide');//反转显示和隐藏$('button').popover('toggle');//隐藏并销毁$('button').popover('destroy');Popover 插件中事件有两种。
//事件,其他雷同$('button').on('show.bs.tab', function () {alert('调用 show 方法时触发!');});二.警告框警告框即为点击小时的信息框。//基本实例警告:您的浏览器不支持!
//添加淡入淡出效果如果用 JavaScript,可以代替 data-dismiss="alert"//JavaScript 方法$('.close').on('click', function () {$('#alert').alert('close');})Alert 插件中事件有四种。//事件,其他雷同$('#alert').on('close.bs.alert', function () {alert('当 close 方法被触发时调用!');});
以上就是如何使用Bootstrap弹出框和警告框插件的详细内容了,文中示例代码介绍的非常详细,图文详解容易学习,非常适合初学者入门。希望你们能有所收获。