模态框

 

 //引用文件

<link href="../js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />

 <script src="../js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>

 

 

//模态框 

<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">模态框标题
</h4>
</div>
<div class="modal-body clearfix" style="overflow-y: auto; height: 75vh">
模态框中显示的内容

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭</button>

</div>
</div>
</div>
</div>

//html代码

<a onclick="showModel()">打开模态框</a>

 

 

//javaScript 代码

<script type="text/javascript">

function showModel(){

//打开模态框

 $("#myModal").modal("show");

}

</script>