加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Bootstrap 弹出框和警告框插件

发布时间:2020-12-17 20:53:37 所属栏目:安全 来源:网络整理
导读:一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器。 //基本用法 button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件" 点击弹出/隐藏弹出框 /button //JavaScript 初
一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器。 //基本用法 <button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件"> 点击弹出/隐藏弹出框 </button> //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 方法时触发!‘);
});

二.警告框
警告框即为点击小时的信息框。
//基本实例
<div class="alert alert-warning">
<button class="close" type="button" data-dismiss="alert">
<span>&times;</span>
</button>
<p>警告:您的浏览器不支持!</p>
</div>

//添加淡入淡出效果
<div class="alert alert-warning fade in">

如果用 JavaScript,可以代替 data-dismiss="alert"
//JavaScript 方法
$(‘.close‘).on(‘click‘,function () {
$(‘#alert‘).alert(‘close‘);
})

Alert 插件中事件有四种。

//事件,其他雷同
$(‘#alert‘).on(‘close.bs.alert‘,function () {
alert(‘当 close 方法被触发时调用!‘);
});

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读