Bootstrap对话框使用实例讲解

Bootstrap对话框使用实例讲解

使用模态框的弹窗组件需要三层 div 容器元素

分别为 modal(模态声明层) dialog(窗口声明层) content(内容层)

在内容层里面,还有三层,分别为 header(头部)、 body(主体)、 footer(注脚)

一个简单的对话框登陆/注册例子

×

帐号:

密码:

登录

退出

×

帐号:

密码:

确认:

注册

退出

登陆

注册

对话框其他知识

jQuery方式声明对话框

$('#myModal').modal({

show : true,

backdrop : false,

keyboard : false,

remote : 'index.html',

});

jQuery方式显示对话框

$('#myBtn').on('click', function () {

$('#myModal').modal('show');

});

对话框的事件

show.bs.modal  ==> 在show方法调用时立即触发

shown.bs.modal  ==> 在模态框完全显示出来并且CSS动画完成之后触发

hide.bs.modal ==> 在hide方法调用时 还未关闭隐藏时触发

hidden.bs.modal ==> 在模态框完全隐藏之后并且CSS动画完成之后触发

$('#myModal').on('show.bs.modal', function () {

alert('show !');

});

边缘弹出框

title="弹出框" data-content="这是一个弹出框">点击弹出/隐藏弹出框

title="弹出框" data-content="这是一个弹出框">点击弹出/隐藏弹出框

其他方法

$('button').popover('show'); //显示

$('button').popover('hide'); //隐藏

$('button').popover('toggle'); //反转显示和隐藏

$('button').popover('destroy'); //隐藏并销毁

事件

show.bs.popover ==> 在调用show方法时触发

shown.bs.popover ==> 在显示整个弹窗时触发

hide.bs.popover ===> 在调用hide方法时触发

hidden.bs.popover ==> 在完全关闭整个弹出时触发

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。