模态窗
开发工具与关键技术：Visual Studio 2015 – 模态窗
作者：廖亚星
撰写时间：2019年 5月 25 日
在搭建页面的时候，往往会弹出很多模态窗体，如果要我们一个一个写点击事件与关闭页面的事件话，那无疑很耗费时间，而搭建页面，引用插件无疑是写代码中最美妙的事了，下面操作的是bootstrap4中的模态框。
使用Bootstrap的JavaScript模态框插件可以为页面添加醒目的提示和交互，用于通知用户、访客交互、消息警示或自定义的内容交互。
弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从中删除滚动事件，以便模态框自身的内容能得到滚动。点击模态框的“backdrop”（灰背景区域），将自动关闭动态模块框。Bootstrap一次只支持一个模态窗口，不支持嵌套模式，那样叠加会造成用户体验不佳。模态框使用 position: fixed，在呈现上与其它元素相比有很大不同。尽可能将弹出模态框的HTML放在顶级位置，以避免其它元素干扰，尤其是当另一个固定元素中也定义了 .modal 事件时，可能会遇到问题
首先我们要引用Bootstrap的CSS与JS插件
给它一个按钮：
然后写入模态窗固定代码：
页面图：
点击按钮后的模态窗体：
这样一个简单的模态窗弹出就做好了
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。