模态框的制作

                                 模态框的制作

开发工具与关键技术： 专题技术
作者：彭春怡
撰写时间：2019/4/1

下面我给大家展现的是我刚刚学会的一个通过”vs”完成的模态框。说起模态，我相信大家都觉得很简单，当然我也觉得，因为了解了嘛.可是对于新手就不一样了，我的展现是希望可以给新手们一点点的帮助。如不对的地方请见谅。谢谢。
我给大家展现模态框。按键有两种方法，一种是我们通常使用的：鼠标按下弹出按钮，模态框弹出；鼠标
按下关闭按钮，模态框关闭。这种方法是我们很常见的。第二种生活中也很常见，不过新手却很少用，是通过快捷键实现模态框弹出与关闭的按钮。
当然制作如此简单的模态框，少不了插件的帮助。而我展现的模态框需要三个插件：
Css样式插件：“bootstrap.min.css” 。这个插件在老师的讲课中是尝见，想要模态框隐藏起来它是必不可少的。直接引入便可使用。
如下：

Js插件：“jquery-3.2.1.min.js”，“bootstrap.min.js”。这两个插件在老师的讲课中也是常见，想要实现模态框按钮事件，这两个插件也是不可少的，少了按钮便失去作用。直接引入便可使用。 如下： 以上的插件在网上查找便可。 接下来就是模态框简单的样式代码与源代码： 样式代码：

“tooi”给盒子设了大小与及颜色。“coou”给弹出按钮设置的颜色。“son”设置模态框的大小与及颜色。“io”关闭按钮的大小。
源代码：

弹出按钮

关闭

弹出模态框

外面一个大盒子，放一张背景图，“background-image”是用来放背景图的。然后在大盒子里面放两个盒子，第一个盒子写模态框弹出的按钮，第二个盒子写模态框关闭的按钮。关闭按钮还要给它几个盒子，将它包裹住，不是为别的，是为了给制作模态框。记住制作按钮的时候都需要给它一个“id”，为下面制作按钮效果做准备。 当然也不只是制作按钮需要用“id”，这要看你下面制作效果所需要的了。“ ”是下面制作点击事件所需要的。 还有就是js代码： 点击事件实现效果： $("#mook").click(function () { $("#coog input[type='reset']").click(); $("#modalCombox").modal(); }); 这个方法是实现鼠标按下弹出按钮便弹出，鼠标按下关闭按钮便关闭的功能。“click”是点击事的意思。“#”表示id，制作点击按钮需要引入你所需要的id，比如：“#mook”是源代码中给弹出按钮的id，等等。“input[type='reset']"”表示你不确定下文有多少个input标签时用到的表达方式，指定是那个input标签。因为上面的源代码只有一个id，所以可以写也可以不写。“modal”是模型的意思。点击事件就这样了。 快捷键点击实现效果： 弹出按钮： $("body").keyup(function (e) { if (e.keyCode == 81) { $("#mook").click(); }); 看起来很简单吧，就一点点代码，跟点击事件差不多，就是这句“keyCode == 81”不同。这句就是引入快捷键，“81”是“Q”键，是用数字来表达键盘按键。如果喜欢使用快捷键的话，可以到网上去查找键盘上的按键分别是用什么数字表达的，挺多的。 关闭按钮： $("body").keyup(function (e) { if (e.keyCode == 65) { $("#modalCombox").modal('hide'); } }); 快捷键关闭按钮与弹出按钮差不多是一样的，“keyCode == 65”“65”是“A”键就是id不同，还有modal('hide'), “modal”是模型的意思,“ hide”是隐藏。

下面是实现的效果图：
图1

按下弹出按钮便会弹出图2模态框
图2

同时按下图2关闭按钮，模态框就会关闭。要是快捷键的效果，按下相对应的弹出按键便会实现图2.
在按下相对应的关闭按钮模态框就会关闭。
总结：以上都是老师讲课中的内容，记住的不多，但也让我对模态框的知识进步了一点，这是我的一点小知识，如有不对请指教，谢谢。