bootstrap模态框

使用模态框需要引入俩个文件

<!-- bootstrap样式 --><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"><!-- bootstrap样式js --><script src="js/bootstrap.min.js"  type="text/javascript"></script>

添加事件

<span class="button button-primary button-rounded button-small"  >年度产品统计</span>

<span class="button button-primary button-rounded button-small"      data-toggle="modal" data-target="#productStatisticsModal2" >年度产品统计</span>

弹出层

<!--     弹出层               --><!--     折线统计图       --><div class="modal fade bs-example-modal-sm" id="productStatisticsModal2"role="dialog" aria-labelledby="mySmallModalLabel"><div class="modal-dialog modal-lg" 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">×</span><!--关闭按钮--></button><h4 class="modal-title" id="myModalLabel">年度产品统计</h4></div>                                <!--内容部--><div class="modal-body"><div id="line" style="width:722px;height:300px;"></div></div>                                <!--底部--><div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">确定</button></div></div></div></div>

调节模态框大小

方法一

<div class="modal-content" style="width:800px; height:500px;">

方法二

变大

<div class="modal-dialog modal-lg">

变小

<div class="modal-dialog modal-sm">