Bootstrap 模态框（Modal）

作者: Java成长记_Camel | 来源:发表于2018-12-19 22:47 被阅读17次

Bootstrap 模态框（Modal）插件详细讲解

第一步：

加载框架：

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
2.bootstrap.js 或压缩版的 bootstrap.min.js

第二步：

用法
您可以切换模态框（Modal）插件的隐藏内容：

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：

$('#identifier').modal(options)

使用代码1（一个ID弹出）：

<!-- 按钮触发模态框 data-toggle="modal" 点击这个按钮会触发模态框   data-target="#myModal 这个是点击后回触发哪个模态框？ 唯一的id标识-->
<!--data-backdrop="static"  这个说明，只能点击关闭按钮X  才能关闭弹窗，点击其他区域都不能关闭弹窗-->
<button class="btn btn-primary"  data-toggle="modal" data-target="#myModal" data-backdrop="static">点击弹窗</button>
<!-- 模态框（Modal） 然后给模态框标识唯一的id 来区分不同的模态框  modal fade  淡入淡出的效果-->
<div class="modal fade" id="myModal" tabindex="-1" >
    <div class="modal-dialog">
        <div class="modal-content"  >
            
            <div class="modal-header">
                <!--class="close" 给关闭按钮样式  data-dismiss="modal" 当点击这个关闭按钮时 关闭弹窗-->
                <h4 class="modal-title" style="width: 100%;">会员登录</h4>
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ><span>&times;</span></button>
             
           </div>
               
           
            <div class="modal-body">
            
            <form action="" method="post" class="form-horizontal">
                 <div class="form-group">
   
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱账号/手机号">
    </div>
  </div>
  <div class="form-group">
  
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
    </div>
   
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label >
          <input type="checkbox" > 记住密码    
        </label>
        
      </div>
    </div>
  </div>

  <p class="text-muted">还没有账号？</p>

  <a href="http://wwww.baidu.com"><p class="text-info text-right">忘记密码？</p></a>
<!--  注册按钮-->
<button class="btn btn-primary"  data-toggle="modal" data-target="#myModa2" data-backdrop="static" >点击弹窗</button>
<button type="button" class="btn btn-success  btn-block">登录 </button>
            </form>
            
            
 <!--    注册表单       -->
            
                        <form action="" method="post" class="form-horizontal" id="zhuce">
                 <div class="form-group">
   
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱账号/手机号">
    </div>
  </div>
  <div class="form-group">
  
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
    </div>
   
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label >
          <input type="checkbox" > 记住密码    
        </label>
        
      </div>
    </div>
  </div>

<button type="button" class="btn btn-success  btn-block">登录 </button>
            </form>
            

      
      <div class="modal-footer">
        
        <!--<button class="btn btn-default">注册</button>
        <button class="btn btn-primary">登录</button>-->
      </div>
    </div>
   </div>
</div>  
<!--登入结束-->

代码讲解：

modal-title 定义模态框的标题
使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
如果您仔细查看上面的代码，您会发现在 <button> 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
在模态框中需要注意两点：
第一是 .modal，用来把 <div> 的内容识别为模态框。
第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby="myModalLabel"，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

image.png

代码2（多个ID之间的切换）

<!-- 注册窗口 -->
    <div id="register" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h1 class="text-center">注册</h1>
                </div>
                <div class="modal-body">
                    <form class="form-group" action="">
                            <div class="form-group">
                                <label for="">用户名</label>
                                <input class="form-control" type="text" placeholder="6-15位字母或数字">
                            </div>
                            <div class="form-group">
                                <label for="">密码</label>
                                <input class="form-control" type="password" placeholder="至少6位字母或数字">
                            </div>
                            <div class="form-group">
                                <label for="">再次输入密码</label>
                                <input class="form-control" type="password" placeholder="至少6位字母或数字">
                            </div>
                            <div class="form-group">
                                <label for="">邮箱</label>
                                <input class="form-control" type="email" placeholder="例如:123@123.com">
                            </div>
                            <div class="text-right">
                                <button class="btn btn-primary" type="submit">提交</button>
                                <button class="btn btn-danger" data-dismiss="modal">取消</button>
                            </div>
                            <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 登录窗口 -->
    <div id="login" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h1 class="text-center">登录</h1>
                </div>
                <div class="modal-body">
                    <form class="form-group" action="">
                            <div class="form-group">
                                <label for="">用户名</label>
                                <input class="form-control" type="text" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="">密码</label>
                                <input class="form-control" type="password" placeholder="">
                            </div>
                            <div class="text-right">
                                <button class="btn btn-primary" type="submit">登录</button>
                                <button class="btn btn-danger" data-dismiss="modal">取消</button>
                            </div>
                            <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a>
                    </form>
                </div>
            </div>
        </div>
    </div>```

#####问题一：bootstrap多层模态框滚动条消失怎么办

监测html发现，当打开模态框时，会给 body 元素加一个 modal-open 的 class，而在 bootstrap.css 中，有这样一条 css 规则：
.modal-open .modal {overflow-x:hidden; overflow-y:auto}

因为有 overflow-y:auto，所以模态框才可以滚动，而当关闭任何一个模态框时，body 元素的 css 规则 modal-open 会被移除掉，自然 overflow-y:auto 也就没有了，所以模态框的滚动条就消失了。
解决方案是在模态框的 div 元素上加一条 style="overflow: auto"，如下：
<div class="modal fade" ... style="overflow: auto">

这样，模态框的滚动就不依赖 body 元素的 css 规则 modal-open 了。

```<style type="text/css">

   .modal-open{
       overflow-y: scroll;
    }
    body{
        padding-right:15px!important;
    }


</style>```

加背景图片

```.modal-content{
    
     background-image: url(assets/img/登入注册背景图片.jpg);
      
}```

错误代码加样式
```.error{
    color:red;
}```

Bootstrap 模态框（Modal）