模态窗

小鱼儿 2022-01-26 01:21 430阅读 0赞 
  1. 模态窗

开发工具与关键技术：Visual Studio 2015 – 模态窗
作者：廖亚星
撰写时间：2019年 5月 25 日

在搭建页面的时候，往往会弹出很多模态窗体，如果要我们一个一个写点击事件与关闭页面的事件话，那无疑很耗费时间，而搭建页面，引用插件无疑是写代码中最美妙的事了，下面操作的是bootstrap4中的模态框。
使用Bootstrap的JavaScript模态框插件可以为页面添加醒目的提示和交互，用于通知用户、访客交互、消息警示或自定义的内容交互。
弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从中删除滚动事件，以便模态框自身的内容能得到滚动。点击模态框的“backdrop”（灰背景区域），将自动关闭动态模块框。Bootstrap一次只支持一个模态窗口，不支持嵌套模式，那样叠加会造成用户体验不佳。模态框使用 position: fixed，在呈现上与其它元素相比有很大不同。尽可能将弹出模态框的HTML放在顶级位置，以避免其它元素干扰，尤其是当另一个固定元素中也定义了 .modal 事件时，可能会遇到问题
首先我们要引用Bootstrap的CSS与JS插件
在这里插入图片描述
在这里插入图片描述
给它一个按钮：
在这里插入图片描述
然后写入模态窗固定代码：
在这里插入图片描述
页面图：
在这里插入图片描述
点击按钮后的模态窗体：
在这里插入图片描述
这样一个简单的模态窗弹出就做好了

发表评论

表情：
评论列表 （有 0 条评论，430人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Qt模态与非模态

    模态是指当子窗口弹出时，焦点始终被强行集中于子窗口，只要子窗口不退出，焦点就不会被释放。非模态正好相反。 从线程角度讲，模态子窗口的线程是阻塞的，父、子窗口各有一个线程，当创

    系统管理员系统管理员/ 0 赞/ 278 阅读

    相关 C# 模态窗体详细介绍

    摘要：本文阐述了在基于.NET平台的Windows程序开发中使用模态窗体的诸多方面，部分内容延伸到一般窗体的应用。 概述 　　何谓模态窗体？简单的可以理解为窗体对话框，

    迈不过友情╰迈不过友情╰/ 0 赞/ 412 阅读

    相关 模态窗

    模态窗 开发工具与关键技术：Visual Studio 2015 – 模态窗 作者：廖亚星 撰写时间：2019年 5月 25 日 在搭建页面的时候，往往会弹

    小鱼儿小鱼儿/ 0 赞/ 431 阅读