模态弹框

<div class="modal fade" id="myModal-two" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 100px;">
<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" style="text-align: center">
         规划行程
          </h4>

</div>
<div class="modal-body">
//弹框中部内容
        <div id="map" style="margin: auto;line-height: 70px;font-size: 16px">
         &nbsp;&nbsp;&nbsp;&nbsp;去规划
         <img class="logo" src="next.png" alt="logo"/>
        </div>
        <div id="ready-ghua" style="margin:10px auto;line-height: 70px;font-size: 16px">
        &nbsp;&nbsp;&nbsp;&nbsp;去选择
        <img class="logo" src="next.png" alt="logo"/>
        </div>

</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
<!--模态结束-->

JS部分:
//点击"规划"弹出提示框
$('.guihua').click(function(){
$('#myModal-two').modal({
keyboard: true
});
});

原文地址:https://www.cnblogs.com/mo-cha/p/5798501.html