bootstrap模态框（Modal）的应用

模态框（Modal）通俗的说就是在父窗体上弹出的一个子窗体。

通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍，可以在不离开父窗体的情况下进行一些互动和内容的交互。

<!--   button定义          -->
<button type="button" id="export" class="col-md-1 col-sm-2 btn-sm btn-primary " data-toggle="modal" data-target="#modal-default">导出</button>-->

 

 <!--  原始导出对话框 -->
    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">导出格式</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="radio col-md-5" >
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
                                导出为Excel文件
                            </label>
                        </div>
                        <div class="radio col-md-5">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
                                导出为Word文件
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>

        </div>
    </div>