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

时间:2020-05-15 人气:0

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

加载全部内容