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

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

页面效果：

html+js：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>my love-用户登录</title>
 <link rel="stylesheet" href="css/bootstrap.css">
 <link rel="stylesheet" href="css/login.css">
 <link rel="stylesheet" href="css/register.css">
 <script src="js/jquery.js" type="text/javascript"></script>
 <script src="js/modal.js" type="text/javascript"></script>
</head>
<body>
 <div class="main">
  <form class="form-horizontal" action="index.html">
   <div class="form-group">
    <label class="col-xs-3 col-md-3 control-label no-padding-right">用户名：</label>
    <div class="col-xs-7 col-md-7">
     <input type="text" class="form-control input-user-name" placeholder="请输入用户名......">
    </div>
   </div>
   <div class="form-group">
    <label class="col-xs-3 col-md-3 control-label no-padding-right">密   码：</label>
    <div class="col-xs-7 col-md-7">
     <input type="password" class="form-control password-user-name" placeholder="请输入密码......">
    </div>
   </div>
   <div class="form-group bottom-button">
    <div class="col-xs-offset-4 col-xs-3 col-md-3">
     <button type="button" class="btn btn-success login-success-button">登录</button>
    </div>
    <div class="col-xs-3 col-md-3">
     <!-- Button register-modal -->
     <button type="button" class="btn btn-info" data-toggle="modal" data-target="#register-modal">注册</button>
    </div>
   </div>
  </form>
  <!-- Modal -->
  <div class="modal fade" id="register-modal" tabindex="-1" role="dialog" aria-labelledby="register-modal-label">
   <div class="modal-dialog" role="document">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
      <h4 class="modal-title" id="register-modal-label">新用户注册：</h4>
     </div>
     <div class="modal-body">
      <div class="form-horizontal">
       <div class="form-group">
        <label class="col-xs-3 col-md-3 control-label no-padding-right">邮   箱：</label>
        <div class="col-xs-7 col-md-7">
         <input type="text" class="form-control">
        </div>
       </div>
       <div class="form-group">
        <label class="col-xs-3 col-md-3 control-label no-padding-right">用户名：</label>
        <div class="col-xs-7 col-md-7">
         <input type="text" class="form-control">
        </div>
       </div>
       <div class="form-group">
        <label class="col-xs-3 col-md-3 control-label no-padding-right">密   码：</label>
        <div class="col-xs-7 col-md-7">
         <input type="password" class="form-control">
        </div>
       </div>
       <div class="form-group">
        <label class="col-xs-3 col-md-3 control-label no-padding-right">确认密码：</label>
        <div class="col-xs-7 col-md-7">
         <input type="password" class="form-control">
        </div>
       </div>
      </div>
     </div>
     <div class="modal-footer">
      <button type="button" class="btn btn-info register-button">注册</button>
      <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
     </div>
    </div>
   </div>
  </div>
 </div>
 <script type="text/javascript">
  $(function() {
   $('.register-button').click(function() {
    document.location.href = "login.html";
   });
  });
 </script>
</body>
</html>

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)插件代码解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索bootstrap
，插件
， modal
模态框插件
模态框 modal.js、模态框 modal.js 下载、modal模态框、bootstrap modal、bootstrap modal 关闭，以便于您获取更多的相关知识。

时间： 2024-10-01 11:44:57

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

Bootstrap 模态框(Modal)插件代码解析_javascript技巧的相关文章

bootstrap模态框实现拖拽效果_javascript技巧

Bootstrap模态框调用功能实现方法_javascript技巧

Bootstrap模态框(modal)垂直居中的实例代码_javascript技巧

BootStrap实现邮件列表的分页和模态框添加邮件的功能_javascript技巧

jquery实现select下拉框美化特效代码分享_javascript技巧

同步文本框内容JS代码实现_javascript技巧

BOOTSTRAP时间控件显示在模态框下面的bug修复_javascript技巧

Bootstrap菜单按钮及导航实例解析_javascript技巧

Bootstrap页面布局基础知识全面解析_javascript技巧