Bootstrap对话框使用实例讲解
使用模态框的弹窗组件需要三层div容器元素
分别为modal(模态声明层)dialog(窗口声明层)content(内容层)
在内容层里面,还有三层,分别为header(头部)、body(主体)、footer(注脚)
一个简单的对话框登陆/注册例子
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<linkrel="stylesheet"href="./css/bootstrap.min.css">
<scriptsrc="./js/jquery.min.js"></script>
<scriptsrc="./js/bootstrap.min.js"></script>
<style>
.modal-dialog{
width:20%;
}
.modal-footer,.modal-header{
text-align:center;
}
input{
width:80%;
}
</style>
</head>
<body>
<!--LOGINMODULE-->
<divid="loginModal"class="modalfade"tabindex="-1">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal">
<span>×</span>
</button>
<h4class="modal-title">会员登录</h4>
</div>
<divclass="modal-body">
<labelfor="log_uname">
<span>帐号:</span>
<inputid="log_uname"name="log_uname"type="text"placeholder="inputyouraccount">
</label>
<br>
<labelfor="log_passwd">
<span>密码:</span>
<inputid="log_passwd"name="log_passwd"type="password"placeholder="inputyourpassword">
</label>
</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-primary">登录</button>
<buttontype="button"class="btnbtn-warning"data-dismiss="modal">退出</button>
</div>
</div>
</div>
</div>
<!--LOGINMODULE-->
<divid="registerModal"class="modalfade"tabindex="-1">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal">
<span>×</span>
</button>
<h4class="modal-title">注册会员</h4>
</div>
<divclass="modal-body">
<labelfor="uname">
<span>帐号:</span>
<inputid="reg_uname"name="reg_uname"type="text"placeholder="inputyouraccount">
</label>
<br>
<labelfor="reg_passwd">
<span>密码:</span>
<inputid="reg_passwd"name="reg_passwd"type="password"placeholder="inputyourpassword">
</label>
<labelfor="reg_confirm_passwd">
<span>确认:</span>
<inputid="reg_confirm_passwd"name="reg_confirm_passwd"type="password"placeholder="confirmyourpassword">
</label>
</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-primary">注册</button>
<buttontype="button"class="btnbtn-warning"data-dismiss="modal">退出</button>
</div>
</div>
</div>
</div>
<buttonclass="btnbtn-primary"data-toggle="modal"data-target="#loginModal">登陆</button>
<buttonclass="btnbtn-warning"data-toggle="modal"data-target="#registerModal">注册</button>
</body>
</html>
对话框其他知识
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!');
});
边缘弹出框
<buttonclass="btnbtn-lgbtn-danger"type="button"data-toggle="popover"
title="弹出框"data-content="这是一个弹出框">点击弹出/隐藏弹出框</button>
<script>
$('button').popover();
</script>
其他方法
$('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实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。