BootStrap模态框

关于模态框

所谓模态框就是指显示在屏幕上覆盖父窗口的可以独立操作的一种窗体，模态框依附于主窗口，并且可以和主窗口交互。在主窗口可以通过任何一个控件的onCLick事件来打开模态框，并且向模态框传递数据。

创建模态框

模态框主要分三部分，头部、内容和尾部，这三部分其实就是三个div，这三个div只是基本组成部分，我们可以根据实际情况增加或者减少div数量。我们看一下如何创建一个模态框。

<div class="modal" id="myModal">
	<div class="modal-dialog">
            <div class="modal-content">
		
                <!-- 模态框头部 -->
		<div class="modal-header">
		     <h4 class="modal-title">模态框</h4>
		</div>
		
		<!-- 模态框内容 -->
		<div class="modal-body">
		     <input type="text" id="input">
		</div>
		
		 <!-- 模态框底部 -->
		 <div class="modal-footer">
		     <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
		 </div>
             </div>
        </div>
</div>

图片.png 简单来讲，上面的代码就可以构建一个基本的模态框了，我们直接在头部、内容、尾部三个部分添加自己的组件。需要注意的是，一个模态框的结构基本是固定的，主要包含三层，不要改变最外边三个div的层次结构，比如去掉modal-dialog这个div层，这样会无法创建模态框。也不要尝试改变class的值，这样也会导致无法创建模态框或者显示错误等问题。总而言之，模态框的基本结构就是上面这样的，我们要做的就只是向内容区域添加想要的组件就行。

打开模态框

由于模态框是依附于主界面的，所以一般情况下打开模态框是需要通过界面上的一个组件来打开了，打开模态框有两种模式，一种是静态模式，一种是固定模式，静态模式适合与不需要传参的情况，动态模式适合需要传递参数的情况。

静态模式

<div class="container bg-primary text-center">
    <button type="button" class="btn btn-primary center" data-bs-toggle="modal" data-bs-target="#myModal">点我</button>
</div>

静态模式的写法是固定的，必须使用data-bs-toggle和data-bs-target两个内置属性，data-bs-toggle表示要打开一个模态框，data-bs-target表示要打开哪一个模态框，其值是模态框的id。

动态模式动态模式就不要data-bs-toggle和data-bs-target两个属性了，而是直接使用onClick触发点击事件来打开模态框。需要定义一个js方法，在方法内部绑定模态框。

<div class="container bg-primary text-center">		
    <button type="button" class="btn btn-primary center" onclick="f(123)">点我</button>
</div>

function f(val) {
    $("#myModal").modal("show")//绑定模态框
}

给模态框传值

我们已经成功创了一个模态框了，现在比较关注的一个问题是如何给模态框传值，这种场景应用的也是比较多的。比如一个列表，我们要修改列表项的内容一般情况是通过一个编辑按钮打开一个弹框，同时将所选行的数据展示到弹框中，修改完了之后再将数据更新到数据库中。这个场景就涉及到了如何将列表中的数据传递给模态框，模态框的数据传递一般使用上面提到的动态绑定方式，还是刚才的代码，我们只需要在js方法中再增加一句代码就可以实现传值了。

 function f(val) {
	$("#myModal").modal("show")//绑定模态框
        $("#input").val(val)//给模态框里的输入框传值
 }

图片.png

模态框位置

可以通过modal-dialog-centered设置模态框居中显示。

<div class="modal-dialog modal-dialog-cnetered">
    <div class="modal-content">
    ...		
    </div>
</div>

模态框动画

通过给外层div的class添加fade值开启动画，不添加默认没有动画。

<!-- 添加动画效果 --> 
<div class="modal fade"></div> 
<!-- 不使用动画效果 -->
<div class="modal"></div>

控制大小

模态框不仅可以控制位置，还可以改变大小，系统内置有小框modal-sm，大框modal-lg,超大框modal-xl几种尺寸模式可选。

<div class="modal" id="myModal">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">小框</h4>
            </div>
		
		     
        </div>
     </div>
</div>

图片.png

大框和超大框的设置也是类似的，只需要将modal-sm替换就行了。

全屏显示

有时候我们需要将模态框显示成全屏，这也是可以的，将modal-dialog层设置一个model-fullscreen的class值就行了。

<div class="modal" id="myModal">
    <div class="modal-dialog modal-dialog-centered model-fullscreen">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">小框</h4>
            </div>
		
		     
        </div>
     </div>
</div>

图片.png