bootstrap modal多层弹出框设置

 

第一层modal框展示 ：

<%@ page contentType="text/html;charset=UTF-8" %>
<div id="modal-dataInfo-much" data-backdrop="static" class="modal fade" style="margin-top: -50px;display:none;width:700px;z-index: 1070;margin-left: -350px;">
	<div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header" id="modal-stackable-label">
           <button type="button" data-dismiss="modal" aria-hidden="true" class="close">&times;</button>
           <h4 class="modal-title">推荐位信息</h4>
        </div>
        <div class="modal-body">
		<form id="inputForm"  action="" method="post" class="form-horizontal" enctype="multipart/form-data">
		<input type="hidden" id="itemIdMuch" name="itemIdMuch">
		<input type="hidden" id="vedioId" name="vedioId">
		<div class="control-group" style="margin-top: 20px;">
            <label class="control-label">推荐位名称：</label>
            <div class="controls">
                <input type="text" id="name" name="name" style="height: 30px;" class="input-xlarge"/>
                <span class="help-inline"><font color="red">*</font> </span>
            </div>
        </div>
		
		<div class="form-actions" id="bthidden">
			<input id="btnSubmit" class="btn btn-primary" type="button" onclick="submitData()" value="保 存"/>
		</div>
	</form>
	</div>
	</div>
	</div>
</div>
<script type="text/javascript">
$("#modal-dataInfo-much").modal('show');//弹出modal框

</script>

第二层modal框展示(在第一层modal基础上弹出)：

<%@ page contentType="text/html;charset=UTF-8"%>
<script type="text/javascript">
        $("#modal-panelInfo").modal('show');//第二层modal框弹出展示
	$("#modal-panelInfo").modal('hide');//第二层modal框隐藏消失
</script>
<div id="modal-panelInfo" data-backdrop="static" class="modal fade" style="margin-top: -50px;display:none;z-index: 1170;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" id="modal-stackable-label">
                    <button type="button" data-dismiss="modal" aria-hidden="true" class="close">&times;</button>
                    <h4 class="modal-title">面板信息</h4>
                </div>
                <div class="modal-body">
                                        角标名称：<input type="text" id="coinname" style="height: 30px;margin-top: 13px;"/>
                <button style="margin-top: 5px;" class="btn btn-primary" onclick="toPage_panelInfo(1);">查询</button>
                <button style="margin-top: 5px;" class="btn btn-primary" onclick="saveDataCoin();">保存角标</button>
                    <table id="panelInfoTable" class="table table-striped table-bordered" style="">
                        <thead>
                            <tr>
                                <th>
                                   <!--  <input type="checkbox" id="changeBox" onclick="checkAll(this,'panelId');"/> -->
                                </th>
                                <!-- <th style="width: 10%">角标ID</th> -->
                                <th style="width: 40%">角标名称</th>
                                <th style="width: 50%">角标图片</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <div class="text-center center" style="">
                    	<input type="hidden" value="" id="hidden_flg">
                        <input type="hidden" value="1" id="current">
                                                                            当前第<input id="resourcePageNo_panelInfo" type="text" style="width:30px;height:20px;"/>/<span id="resourceTotalPage_panelInfo"></span>页&nbsp;&nbsp;
                                                                             共<span id="resourceTotalRecord_panelInfo"></span>条数据  
                        <span id="previous_panelInfo"><a href="#" onclick="previous_panelInfo()" >上一页</a></span>
                        <span id="next_panelInfo"><a href="#" onclick="next_panelInfo()">下一页</a></span>
                    </div>
                </div>
            </div>
        </div>
</div>  

注意：通过设置style属性中的z-index的高度来控制modal弹出层的高度。

问题：bootstrap多层modal弹窗时会有失去焦点在弹出的modal框。

解决方法：去除tabindex的属性。