关于Bootstrap模态框的问题

关于Bootstrap的模态框的问题,我是深受其害。今天就跟大家一起谈论谈论，暂时就发现了这么一些问题。

1. 模态框两级嵌套问题
2. 模态框显示之后自动获取第一个表单元素焦点的问题

模态框两级嵌套问题

模态框要想进行两级嵌套，只能用JavaScript进行对模态框显示和隐藏调用，不能用HTML和css调用。

$(“模态框选择器”).modal(“show”)；//bootstrap固定显示模态框方法
$(“模态框选择器”).modal(“hide”)；//bootstrap固定隐藏模态框方法
话不说上代码。

下面代码是，一个父级模态框中有一个+号按钮，点击弹出子模态框。
如图所示：

HTML代码：

 <!-- 父级模态框 -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
          <input type="text" class="form-control" style="margin-left: 30px" placeholder="请输入适用范围"> 
          <button class="btn btn-primary" style="margin-left:30px" id="btns">+</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- 子模态框 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
         <input type="text" class="form-control" placeholder="请输入您要添加的计量单位">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

点击父模态框中的+号按钮，弹出子级模态框。

JavaScript代码：

$(function(){
    $("#btns").click(function(e){
      e.stopPropagation();
      $("#myModal1").modal("show");
    })
  })

模态框显示之后自动获取第一个表单元素焦点的问题

首先第一步要想让focus事件生效首先应当，去重模态框中，tabindex="-1" 这个属性和属性值。
第二步，就可以对模态框中的表单元素设置在打开模态框之后自动获得焦点的事件了

javascript代码：

$(function(){
	$("模态框中要获得焦点的元素选择器").focus();
)