javascript中有几种模态框

Posted 2023-04-17

JavaScript中常见的模态框有以下几种：

1. alert：用于弹出一个警示框，只能显示一段文字信息和一个“确定”按钮。
2. confirm：用于弹出带有确认和取消两个选项的对话框，用户点击确认返回true，点击取消返回false。
3. prompt：用于弹出一个输入框，用户可以在其中输入信息，并返回用户输入的内容。
4. showModalDialog：用于显示模态对话框，与window.open()方法相似，但弹出的窗口是模态的，即必须先处理完该窗口的操作才能回到原窗口。
5. Bootstrap Modal：Bootstrap是一种CSS前端框架，其中包含很多可用于网页开发的组件，包括弹出框组件——Modal。Modal可以自定义内容和样式，并支持动画效果，通常用于网站的登录、注册、消息提醒等场景。

需要注意的是，alert、confirm和prompt都是由浏览器提供的默认实现，而showModalDialog和Bootstrap Modal则需要依赖相关的库或组件进行实现。 参考技术A 在JavaScript中，一般有三种常见的模态框（Modal）：

纯CSS模态框：这种模态框是使用HTML和CSS实现的，没有任何JavaScript代码。它通过设置CSS属性来实现模态框的遮罩层和弹出框，可以在网页中快速实现模态框的效果。但是，由于没有JavaScript支持，其功能比较受限。

JavaScript模态框：这种模态框是使用JavaScript编写的，通过动态创建HTML元素和设置CSS属性来实现。它可以实现更多的交互功能，如弹出框内嵌表单、拖动、缩放等效果，但是需要一定的JavaScript编程经验。

第三方插件模态框：这种模态框是使用第三方插件实现的，如Bootstrap框架中的Modal插件、jQuery UI中的Dialog插件等。它们提供了丰富的配置选项和API接口，可以方便地实现各种模态框效果，并且通常具有跨浏览器兼容性和良好的用户体验。但是，需要引入额外的插件文件，并且可能会增加网页加载时间。

javascript bootstrap模态框基本操作

$('#memModle').modal("show");//显示
$('#memModle').modal("hide");//隐藏

//调整宽高
$('#memModle .modal-dialog').width(1100);
$('#memModle .modal-content').width(1100);
$('#memModle .modal-body').height(495);
        
//加载效果
$.showLoading('正在设置...');
$.hideLoading();