模态框的弹出

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：VS 与bootstrap

作者：梁英豪

撰写时间：2019年6月8日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

模态框的弹出

今天呢！我就来练习一下模态框的弹出，模态框的弹出对大家来说都不陌生了。

因为在现实的生活中，都有很多群众都会接触过网络，在网络里往往是离不开模态框的弹出的。为什么这样讲呢？说了这么多知道模态框是怎么弹出吗？

其实就是从一个按钮引发的事件。

一个按钮往往就是按下去就会有下一步的事件发生，例如：微信里的微信红包。

也是从一个按钮触发的事件，点中那个红包框就会弹出一个红包是否打开。如果打开就可以抢到里面的福利，如果不打开就有一个X在右上角取消，因为避免点错，也会有一个往回的余地。因为避免抢到别人的红包。

虽然我这次没有做这个技术点，但是我做了一个别的模态框弹出。

接下来我就来尝试一下，是否可以把一个本人设置好的表格弹出来呢？就一步一步的来写。

第一步就来设置好按钮。并且把按钮添加一个方法。这个方法是用来弹出模态窗体用的。

虽然这次有三个模态框的弹出，但是只要是把一个模态框弹出就已经有点基础了。说明还是有能力继续做下去吧。接下来就是弹出模态框的表格ID了。

第二步就是上面所说弹出模态框就需要一个ID。但是一个模态框对应一个ID。如果按钮的ID或者模态框的方法名称一样的话就会弹出同一个表格或者同一个页面。因为ID是唯一的。

第三步就是在模态框里面写表格。这个表格也是一个一个的打出来。毕竟做的是弹出自做的表格，所以表格里的内容也是自做的。

由于有页面的限制 就只是弹出一个表格的内容请谅解。这样就能把“起始发票”这个模态框弹出来了。但是我觉得按钮前面没有什么修饰所以我就加多了一个阶段。

第四步就是按钮旁边加图标。图标要怎么才能加在按钮的旁边呢？其实这个插件也是很普通。但是里面有很多有趣的图标。

如果要加图标的话就直接在按钮前面加上一个i 标签。zi_buddhas其实是一个图标的名称，后面就是设置图标的大小还有颜色。这次由于是个人爱好，就搞一下事情。以后到真的工作，就不会这么捣蛋了。要不给大家看看一下样式。

这些都是其它按钮的样式。虽然没有把按钮一个个的写出来，但是希望大家会理解的。本人的技术点就这么多了。

但是还没有看到表格的样式啊！现在有人如你所愿吧！这次设置的表格就是那个 “起始发票”这个按钮上。点击那个按钮就会弹出一个模态窗体。这个窗体就是上面代码所建造出来的。

样式就是这样了。虽然还是觉得简陋一些但这可能也是能力范围之内了吧！希望经过这次的练习，能找到更简单的方式去建设表格。