模态框

爱被打了一巴掌 2022-01-26 11:27 404阅读 0赞

**模态框**

模态框，又是一种全新的异空间页面，本篇介绍的模态框开启后，除了窗体、框体之外的内容都被遮住了，点击不了，只能关闭后，其他之前的才能操作。
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190528225147458.png)

打开后的模态框，因为本篇中是介绍新增的模态框，所以模态框体里的所有数据全无，页面一加载，输入框里的数据被重置了，也可不用重置，但这不是新增功能的正确效果，新增，就是添加新的内容，上一次的内容还在就会导致用户使用的不便，这也是项目的不允许的。有数据的话，只有在查看某数据的时候，数据回填到我们的模态框体的输入框里面，或是修改的时候，还没修改之前，把准备修改之前的数据回填到我们的模态框体里面。  
整个模态框的结构包括三部分：标题、内容、操作按钮。标题为本次操作什么功能的效果的标题，如：本篇是新增联系人的，那就是新增联系人的。如果是修改联系人，就改为修改，同时记得把我们的重置取消掉，另外做一个数据回填的功能，还要做查询操作，只是步骤多了，查看也是和修改一样，实现数据回填，但查看是只能看，不能操作，这样的效果是给它做一个只读模式。模态框的基本操作就是这样，传输数据视为重要，当我们新增的时候，往输入框输入的数据，我们可以保存先来，保存下来用我们的表格存放，也可以说也是数据回填到表格里的。首先是给保存按钮一个函数或者id，然后一个点击事件，里面就执行操作。我们的内容的话就看需要到什么数据了，可能是一个text类型input输入框，可能是一个radio类型的input，也可能是select选择数据的下拉框，或者文本域·的input等功能，里面的内容全由程序员自由操作，但有项目需求的限制的话还是要按照要求来完成功能。  
下面就开始介绍新增模态框的功能了，模态框功能操作一共有两部分，或两部分以上。  
首先就是先本模态框的样式写出来，它的整体样式，框体结构，操作功能的操作按钮，内容里的样式等，新增模态框的话需要两个id，一个是我们整体模态框的id，另一个是我们的表单里的id，我们整体的模态框内容和操作可以看做是表单，表单在传输数据，在接收数据，我们做新增的时候，需要重置，所以表单需要id。事先我们要在外部页面准备一个按钮，标题为新增联系人按钮，也就是打开模态框的按钮，给它一个函数或者一个id，实现点击事件。  
新增联系人  
模态框需要在最外写，就是不需要任何的嵌套。  
由于代码过多就不写出来，可以去找插件来写，也可以自己写，然后现在就直接写JavaScript部分，先点击事件，打开模态框。

因为新增还有查询数据和判断，判断传输的数据是否为空，或存在。  
//第一：判断页面传输数据是否为空  
//第二：数据是否存在  
//第三：执行新增操作  
就是以上三步骤：判断页面传输数据是否为空、数据是否存在、执行新增操作（新增后的状态），然后就回到我们模态框里的保存按钮了，它事先准备一个id。  
//获取input输入数据  
var linkmanName = $("\#IlinkmanName “).val();//联系人名称  
var linkmanCode = $(”\#IlinkmanCode").val();//联系人编码  
//判断  
linkmanName != ‘’ && linkmanName != undefined  
&& linkmanCode != ‘’ && linkmanCode != undefined)  
//关闭模态框  
//刷新table  
//提示  
layer.alert(‘请填写完整’, \{ title: ‘提示’, icon: 0 \});  
首先获取页面传输过来的数据，就是模态框里的数据，新增时填入的数据，有多少输入数据就获取多少，但不需要的数据可不获取。接着就是判断，判断获取的这些数据是否不为空或不无定义，然后用post提交数据，判断新增查询的数据是否相等，然后做终极判断，如果状态是等于true的话，就关闭模态框，刷新表格，因为最后是保存数据到表格里的，传输数据，然后用layer提示。  
//关闭模态框  
$("\#modalInsetlinkman").modal(‘hide’);  
//刷新table  
tablinkman = layuiTable.reload(tablinkman);  
模态框整体的结构就是这样，步骤也是这样，先布局模态框，然后打开模态框，写新增内容，怎样的效果，然后新增查询和状态，最后新增保存，传输数据，刷新表格等操作步骤。  
![在这里插入图片描述][20190528225155113.png]  
数据最后会传输到表格里的，本篇无数据是因为数据库还没添加数据。模态框就是这样的操作。

[20190528225155113.png]: /images/20220126/1b782edbc2664a468ca226e01805e84b.png