赞
踩
在百度没有找到什么很合适的教程(主要是因为不会JSP,JQ)
其实使用起来很简单,只需要大概三步
第一步:
加入<script>$('#myModal1').modal(show)</script>
这段代码,才能有效
第二布:
对于你要使用的按钮
修改它的代码
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#myModal1" data-backdrop="static">
<i class="glyphicon glyphicon-repeat"></i>修改 </button>
这里有一个是 data-backdrop="static" 这句话的意义在于当你点击按钮除了弹框,点击空白的地方都会关闭弹窗,而加上之后只有有了关闭才会关闭。
第三部:
就是写你弹窗的内容
<!--详情按钮的弹出框 -->
<div class="modal fade" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">课程详情</h4>
</div>
<div class="modal-body">
<ul class="list-unstyled">
<li><strong>课程编码:</strong>RGB215</li>
<li><br></li>
<li><strong>课程名称:</strong>数据库</li>
<li><br></li>
<li><strong>课时名称:</strong>数据库的种类</li>
<li><br></li>
<li><strong>上课时间:</strong>20170725</li>
<li><br></li>
<li><strong>课时简介:</strong>数据库的历史及发展</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
格式可能有点乱,但是能使用,主要的是id要注意保持一致
这是我做出来的效果,当然不是最好的,其他方法暂时不清楚。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。