模态框示例图:
比如点击下图操作里的修改按钮,弹出上面的模态框:
<inputtype="button" id="updateBtn" value="修改" class="btn btn-primary"
data-toggle="modal"data-target="#updateUser"/> //这里的data-target与下面模态框div的id对应
<!- 模态框(Modal) -->
<div class="modal fade" id="updateUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content" style="background:#E6E6FA;width:350px;height:380px;margin:auto;">
<div class="modal-header" >
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
</div>
<div class="modal-body" >
<div class="updateUserModal">
<ul >
<li >
<label style="position:relative;left:15px;" >用户名</label>
<input type="text" id="userCode" class="input" readOnly="true" style="position:relative;left:22px;"/>
</li>
<li>
<span >*</span><label style="position:relative;left:15px;">角色</label>
<input type="text" id="roleID" class="input " style="position:relative;left:28px;"/>
</li>
<li ><label style="position:relative;left:1px;" >联系方式</label>
<input type="text" id="phonenumber" class="input " style="position:relative;left:7px;" />
</li>
</ul>
</div>
<div id="updateButton">
<input type="button" id="updateUserBtn" value="修改" style='font-size:20px' class="btn btn-add" />
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>