Bootstrap模态框(一个页面显示多个)的使用

在一个页面显示多个模态框时要讲每个模态框用div包裹起来,否咋会产生格式错误。

<html>

    <head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.js"></script>
</head> <body>
<div> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#excel">下载Excel模板</button>
<!-- Excel模态框(Modal) -->
<div class="modal fade" id="excel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">下载Excel模板</h4>
</div>
<form action="${pageContext.request.contextPath }/exportWebExcel" method="post">
<div class="modal-body">
单选题数量:&nbsp;&nbsp;<input type="text" name="danxuan" value="" title="请输入单选题数量" /> <br /> <br /> 多选题数量:&nbsp;&nbsp;<input type="text" name="duoxuan" /> <br /> <br /> 判断题数量:<input type="text" name="panduan" /><br /> <br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<input type="submit" class="btn btn-primary" value="确认">
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div> <p></p>
<!-- -------------------多个模态框样式套用有冲突,解决的办法很简单,用DIV将每个dialog的代码片段包裹一下-------------------------------------------- -->
<p></p>
<div>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#wordMT">下载Word模板</button> <!-- Excel模态框(Modal) -->
<div class="modal fade" id="wordMT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">下载Word模板</h4>
</div>
<form action="${pageContext.request.contextPath }/exporWebWord" method="post">
<div class="modal-body">
单选题数量:&nbsp;&nbsp;<input type="text" name="danxuan" value="" title="请输入单选题数量" /> <br /> <br /> 多选题数量:&nbsp;&nbsp;<input type="text" name="duoxuan" /> <br /> <br /> 判断题数量:<input type="text" name="panduan" /><br /> <br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<input type="submit" class="btn btn-primary" value="确认">
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body> </html>
上一篇:获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”


下一篇:Jmeter API Performance Test