Bootstrap 模态框(Modal)插件代码解析

Bootstrap 模态框(Modal)插件代码解析

Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。下面通过代码给大家介绍bootstrap 模态框插件，先给大家展示下效果图：

页面效果：

html+js：

用户名：

密   码：

</div>

登录

注册

×

邮   箱：

用户名：

密   码：

确认密码：

注册

返回

login.css

body {

background: url(../image/sun.jpg) no-repeat;

-moz-background-size: 100% 100%;

-webkit-background-size: 100% 100%;

}

.main {

width: 365px;

height: 200px;

margin: 230px auto;

/*border: 2px solid #3a9c08;*/

}

.form-horizontal {

padding-top: 30px

}

.main>.form-horizontal>.form-group>.col-xs-3.col-md-3.control-label.no-padding-right {

color: #fff;

}

label.control-label.no-padding-right {

padding-right: 0;

font-size: 17px;

}

.form-horizontal .form-group {

margin-right: 0;

margin-left: 0;

}

.form-group.bottom-button {

padding-top: 10px;

}

register.css

.modal-dialog .modal-content .modal-header {

background: url(../image/registerTop.png) no-repeat;

-moz-background-size: 100% 100%;

-webkit-background-size: 100% 100%;

}

.modal-dialog .modal-content .modal-footer {

background-color: #d5feff;

}

以上所述是给大家介绍的Bootstrap 模态框(Modal)插件代码解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

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