真正的模态窗口不但能禁止背景输入，而且还要能中断代码执行，直到点击确认或取消后，代码才继续执行
请问这个在javascript中应该怎么实现呢？求例子
-
等级
本版专家分：5结帖率 98.45% -
网上普遍都是说三层锁屏，但这不是真正的模态窗口。
真正的模态窗口不但能禁止背景输入，而且还要能中断代码执行，直到点击确认或取消后，代码才继续执行
请问这个在javascript中应该怎么实现呢？求例子展开阅读全文
-
等级
本版专家分：4967勋章
-
- 蓝花 2013年6月 Web 开发大版内专家分月排行榜第三
-
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于JQuery的JS遮罩层效果</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
function showDiv() {
document.body.style.overflow = 'hidden';
var docHeight = Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);
var _div = document.createElement('div');
_div.className = 'divClass';
_div.setAttribute('id', 'divId');
document.body.appendChild(_div);
document.getElementById('divId').style.width = docWidth + 'px';
document.getElementById('divId').style.height = docHeight + 'px';
var _divAlert = document.createElement('div');
_divAlert.className = 'divalert';
_divAlert.id = 'divalert';
document.body.appendChild(_divAlert);
document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
var _divContent = document.createElement('div');
_divContent.id = 'divcontent';
_divAlert.appendChild(_divContent);
var _divbtn = document.createElement('div');
_divbtn.id = 'divbtn';
var _btn = document.createElement('input');
_btn.type = 'button';
_btn.value = '确定';
_btn.id = 'btn';
_divbtn.appendChild(_btn);
_divAlert.appendChild(_divbtn);
document.getElementById('btn').onclick = function() {
document.getElementById('divId').style.display = 'none';
document.getElementById('divalert').style.display = 'none';
document.body.style.overflow = 'auto';
}
}
function resizeDiv() {
var docHeight = Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);
document.getElementById('divId').style.width = document.documentElement.clientWidth + 'px';
document.getElementById('divId').style.height = document.documentElement.clientHeight + 'px';
}
window.onload = function() {
showDiv();
}
window.onresize = resizeDiv;
</script>
<style type="text/css">
body { margin:0; padding:0; }
.divClass { position:absolute; left:0; top:0; background-color:#ccc; z-index:0; }
.divalert { position:absolute; z-index:2000; width:200px; height:100px; border:1px solid #666; background-color:#fff; }
#divcontent { height:60px; }
#divbtn { height:40px; background-color:#ddd; text-align:center; }
#btn { border:1px solid #000; margin-top:10px; }
</style>
</head>
<body>
<div style='height:1000px;'>fsfs</div>
</body>
</html>
-
等级
本版专家分：38366勋章
-
- 银牌 2019年4月 总版技术专家分月排行榜第二
-
- 红花 2019年4月 Web 开发大版内专家分月排行榜第一
-
-
黄花
2019年8月 Web 开发大版内专家分月排行榜第二
2018年11月 Web 开发大版内专家分月排行榜第二
-
-
蓝花
2019年7月 Web 开发大版内专家分月排行榜第三
2019年5月 Web 开发大版内专家分月排行榜第三
2019年3月 Web 开发大版内专家分月排行榜第三
-
-
老赵有个异步执行的类库Jscex，可以去试下
http://jeffreyzhao.cnblogs.com/
-
等级
本版专家分：5
-
根本就不行，你试试改成这样后面的alert会不会马上出现？
我要的效果是点了确定后才继续执行后面的alert
window.onload = function() {
showDiv();
alert(1);
}
-
版主等级
本版专家分：395855勋章
-
- 签到新秀
-
- 探花 2017年 总版技术专家分年内排行榜第三
-
-
进士
2018年总版新获得的技术专家分排名前十
2013年 总版技术专家分年内排行榜第五
-
-
金牌
2018年5月 总版技术专家分月排行榜第一
2018年4月 总版技术专家分月排行榜第一
2018年2月 总版技术专家分月排行榜第一
2017年8月 总版技术专家分月排行榜第一
-
-
模拟的都无法挂起js代码执行，都是基于回调的机制。
showModalDialog方法可以，但是低版本的firefox和有些浏览器不支持
-
等级
本版专家分：1460 -
+1
-
等级
本版专家分：2266
-
靠JS模拟是实现不了的..只有IE以及部分浏览器自带的showModalDialog方法可以..
-
等级
本版专家分：5
-
看来只好换个思路了，悲剧。。。
- 来个模态kuang_关于模态窗口(showModalDialog)的专题【收藏】
转自：http://www.cnblogs.com/donnet/articles/1039509.html1.模态...模态窗口的关闭,model window close3.模态窗口的传递参数,modelwindowgetvaluse4.其他....,other ..1.window.showModalDialog("DialogPage.aspx...
- JavaScript 实现模态对话框 源代码大全
JavaScript实现模态对话框 一、JavaScript实现模态对话框首先，来说一下对话框：对话框在Windows应用程序中使用非常普遍，许多应用程序的设定，与用户交互需要通过对话框来进行，因此对话框是Windows应用程序中最...
- bootstrap设置模态框高度_如何使用JavaScript构建模态框插件
作为一位Web开发人员而言，模态框(Modal)并不会陌生。就我个人而言，我更为熟悉的是怎么...所以一直在探究模态框相关的知识，能很好的了解如何使用原生的JavaScript来构建一个可用的模态框插件，另外为以后如何使用...
- 模态窗口提交
步骤如下: 1.在showModalDialog的那个页面添加 2.设置form的属性target为"" 示列： //------------------------------------------------------- try0.html
- JavaScript 实现模态对话框
对话框是一个特殊的窗口，任何对窗口进行的操作（如移动、最大化、最小化等）也可以在对话框实施。 对话框大致可以分为以下两种： （1）模态对话框：模态对话框弹出后，独占了系统资源，用户只有在关闭该对话...
- 4.1 纯css、html实现模态框（不用js）
适用于前端入门小白的文章，如果刚好学了HTML、CSS,又还没有学习javascript，jQuery，但又想实现点击弹出一个小窗口框在原来的页面上，同时又能点击关闭这个小窗口。
- div/层，实现模式窗口/模态窗口/模式对话框
/*本层要实现覆盖模式窗口以外全部内容的半透明效果*/ background-color:#000000;/*背景色*/ position: absolute ;/*绝对定位，必选，使层绝对依照top,left的标准显示，否则将不能实现覆盖*/ top:0;/*层与页面...
- javascript弹出窗口代码
【1、最基本的弹出窗口代码】 <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') --> </SCRIPT> 因为着是一段javascripts代码，所以它们应该...
- Bootstrap 模态窗口源码分析
前言： bootstrap的 js插件的源码写的非常好，也算是编写jquery插件的模范写法，本来还想大篇详细的分析一下呢，唉，没时间啊，很早之前看过的源码了，现在贴在了博客上， 300来行的代码，其中有很多jquery的高级...
- window.open实现模式窗口
看了些文章，实现模式窗口有两种方式。window.showModalDialog以及window.open。 一、方式介绍window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ showModalDialog() (IE 4+ 支持)...
- 关于模态窗口(showModalDialog)的专题
关于模态窗口(showModalDialog)的专题【收藏】 转自：...模态窗口的关闭,model window close 3.模态窗口的传递参数,model window get valuse 4.其他....,other .. 1.window.showModal
- 用javascript实现控制打开网页窗口的大小 和HTML如何关闭窗口的技巧大全
用javascript实现控制打开网页窗口的大小 和HTML如何关闭窗口的技巧大全 打开窗口即最大化<script language="JavaScript"><!-- Beginself.moveTo(0,0)self.resizeTo(screen.availWidth,screen....
- 模态窗口 showModalDialog
转自：http://www.cnblogs.com/donnet/articles/1039509.html1....模态窗口的关闭,model window close3.模态窗口的传递参数,model window get valuse4.其他....,other .. 1.window.showModalDialog("Dialog...
- 数据库数据写入前端的模态框（Django，Bootstrap，Ajax，数据库）
自从5月22离开实验室522及毕业之后，再也没有写过博客，主要原因是入职一个月以来，基本就是各种培训，公司培训、部门培训、室内培训主要是熟悉公司业务，真正好好学东西的时间也很少，也没啥写的。正好趁着周末加两...
- bom实现方块移动_第35节 浏览器对象模型BOM-JavaScript
其提供了独立于内容而与浏览器窗口进行交互的对象；没有BOM标准：不同的浏览器按照各自的想法实现及扩展BOM，于是，它们之间共有的对象成为了事实上的标准；近年来，W3C为了把浏览器中Javascript最基本的部分标准化...
- window.showModalDialog弹出模态窗口
在我们平时的B/S web开发当中，可能很多时候我们需要有这么一个场景！某些文本框的值是用户可以输入的，也是可以选择的，比如：新增一篇文章，我们可以指定作者是张三，这样的话我们可以在文本框中输入“张三”这个...
- jquery 实现窗口的最大化
当打开一个新窗口时，有些用户想直接最大化显示，不想再多一步操作。如果不在代码中做出明确设置的话，这个一般来说是浏览器自己的设置问题。但用户希望无论什么情况，无论浏览器处于什么样的设置，都要让这个弹出的...
- 关于模态窗口(showModalDialog)的专题【收藏】
转自：http://www.cnblogs.com/donnet/articles/1039509.html1.模态窗口的...模态窗口的关闭,model window close3.模态窗口的传递参数,model window get valuse4.其他....,other .. 1.window.showModalDialog("DialogP
- JavaScript中的BOM（浏览器对象模型）
从这一篇就进入JavaScript进阶的学习阶段，感觉这篇关于BOM写的比较全，就不自己写了，因为没什么理解上的困难，似乎没必要自己再手写一份，不好的地方就是这些对象的方法自己记得肯定是大打折扣了，最好找个时间背...
- 拖动的模态框
3，鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。mousedown mousemove 4，鼠标松开，可以停止模态框移动 mouseup 5, 拖拽过程，鼠标移动过程中，获得最新的值赋给模态框的left 和 top...
- JavaScript打开窗口函数（Window.Open）使用详解、绝对路径与相对路径的获取与转换
JavaScript打开窗口函数（Window.Open）使用详解 一、Location对象的使用简介 location对象： location提供了关于当前打开窗口或者特定框架的url信息。一个多框架的窗口对象在location属性显示的是父窗口的...
- 《JavaScript 闯关记》之 BOM
ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，缺少...
- 关于模态窗口(showModalDialog)的专题【收藏】
转自：http://www.cnblogs.com/donnet/articles/1039509.html1....模态窗口的关闭,model window close3.模态窗口的传递参数,model window get valuse4.其他....,other .. 1.window.showModalDialog("DialogP...
- JavaScript
JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在...
- 治愈 JavaScript 疲劳的学习计划
像其他人一样，我最近偶然看到 Jose Aguinaga 的文章《在 2016 年学 JavaScript 是一种什么样的体验》。 很显然，这篇文章触到了很多人的痛点：我看到它两次荣登 Hacker News 的榜首。它也是 /r/javascript ...
- [乐意黎转载]一个治愈 JavaScript 疲劳的学习计划
2016 年学 JavaScript 是一种什么样的体验》”。 译者注：中文翻译在此。 很显然，这篇文章触到了很多人的痛点：我看到它两次荣登 Hacker News 的榜首。它也是 /r/javascript 上最热门的文章，并且截至目前...
- matlab神经网络30个案例分析
【目录】- MATLAB神经网络30个案例分析(开发实例系列图书) 第1章 BP神经网络的数据分类——语音特征信号分类1 本案例选取了民歌、古筝、摇滚和流行四类不同音乐，用BP神经网络实现对这四类音乐的有效分类。 第2章 BP神经网络的非线性系统建模——非线性函数拟合11 本章拟合的非线性函数为y=x21+x22。 第3章 遗传算法优化BP神经网络——非线性函数拟合21 根据遗传算法和BP神经网络理论，在MATLAB软件中编程实现基于遗传算法优化的BP神经网络非线性系统拟合算法。 第4章 神经网络遗传算法函数极值寻优——非线性函数极值寻优36 对于未知的非线性函数，仅通过函数的输入输出数据难以准确寻找函数极值。这类问题可以通过神经网络结合遗传算法求解，利用神经网络的非线性拟合能力和遗传算法的非线性寻优能力寻找函数极值。 第5章 基于BP_Adaboost的强分类器设计——公司财务预警建模45 BP_Adaboost模型即把BP神经网络作为弱分类器，反复训练BP神经网络预测样本输出，通过Adaboost算法得到多个BP神经网络弱分类器组成的强分类器。 第6章 PID神经元网络解耦控制算法——多变量系统控制54 根据PID神经元网络控制器原理，在MATLAB中编程实现PID神经元网络控制多变量耦合系统。 第7章 RBF网络的回归——非线性函数回归的实现65 本例用RBF网络拟合未知函数，预先设定一个非线性函数，如式y=20+x21-10cos（2πx1）+x22-10cos（2πx2）所示，假定函数解析式不清楚的情况下，随机产生x1,x2和由这两个变量按上式得出的y。将x1,x2作为RBF网络的输入数据，将y作为RBF网络的输出数据，分别建立近似和精确RBF网络进行回归分析，并评价网络拟合效果。 第8章 GRNN的数据预测——基于广义回归神经网络的货运量预测73 根据货运量影响因素的分析，分别取国内生产总值（GDP），工业总产值，铁路运输线路长度，复线里程比重，公路运输线路长度，等级公路比重，铁路货车数量和民用载货汽车数量8项指标因素作为网络输入，以货运总量，铁路货运量和公路货运量3项指标因素作为网络输出，构建GRNN，由于训练数据较少，采取交叉验证方法训练GRNN神经网络，并用循环找出最佳的SPREAD。 第9章 离散Hopfield神经网络的联想记忆——数字识别81 根据Hopfield神经网络相关知识，设计一个具有联想记忆功能的离散型Hopfield神经网络。要求该网络可以正确地识别0~9这10个数字，当数字被一定的噪声干扰后，仍具有较好的识别效果。 第10章 离散Hopfield神经网络的分类——高校科研能力评价90 某机构对20所高校的科研能力进行了调研和评价，试根据调研结果中较为重要的11个评价指标的数据，并结合离散Hopfield神经网络的联想记忆能力，建立离散Hopfield高校科研能力评价模型。 第11章 连续Hopfield神经网络的优化——旅行商问题优化计算100 现对于一个城市数量为10的TSP问题，要求设计一个可以对其进行组合优化的连续型Hopfield神经网络模型，利用该模型可以快速地找到最优（或近似最优）的一条路线。 第12章 SVM的数据分类预测——意大利葡萄酒种类识别112 将这178个样本的50%做为训练集,另50%做为测试集,用训练集对SVM进行训练可以得到分类模型,再用得到的模型对测试集进行类别标签预测。 第13章 SVM的参数优化——如何更好的提升分类器的性能122 本章要解决的问题就是仅仅利用训练集找到分类的最佳参数，不但能够高准确率的预测训练集而且要合理的预测测试集，使得测试集的分类准确率也维持在一个较高水平，即使得得到的SVM分类器的学习能力和推广能力保持一个平衡，避免过学习和欠学习状况发生。 第14章 SVM的回归预测分析——上证指数开盘指数预测133 对上证指数从1990.12.20-2009.08.19每日的开盘数进行回归分析。 第15章 SVM的信息粒化时序回归预测——上证指数开盘指数变化趋势和变化空间预测141 在这个案例里面我们将利用SVM对进行模糊信息粒化后的上证每日的开盘指数进行变化趋势和变化空间的预测。 若您对此书内容有任何疑问，可以凭在线交流卡登录中文论坛与作者交流。 第16章 自组织竞争网络在模式分类中的应用——患者癌症发病预测153 本案例中给出了一个含有60个个体基因表达水平的样本。每个样本中测量了114个基因特征，其中前20个样本是癌症病人的基因表达水平的样本(其中还可能有子类), 中间的20个样本是正常人的基因表达信息样本, 余下的20个样本是待检测的样本(未知它们是否正常)。以下将设法找出癌症与正常样本在基因表达水平上的区别，建立竞争网络模型去预测待检测样本是癌症还是正常样本。 第17章SOM神经网络的数据分类——柴油机故障诊断159 本案例中给出了一个含有8个故障样本的数据集。每个故障样本中有8个特征，分别是前面提及过的：最大压力(P1)、次最大压力(P2)、波形幅度(P3)、上升沿宽度(P4)、波形宽度(P5)、最大余波的宽度(P6)、波形的面积(P7)、起喷压力(P8)，使用SOM网络进行故障诊断。 第18章Elman神经网络的数据预测——电力负荷预测模型研究170 根据负荷的历史数据，选定反馈神经网络的输入、输出节点，来反映电力系统负荷运行的内在规律，从而达到预测未来时段负荷的目的。 第19章 概率神经网络的分类预测——基于PNN的变压器故障诊断176 本案例在对油中溶解气体分析法进行深入分析后，以改良三比值法为基础，建立基于概率神经网络的故障诊断模型。 第20章 神经网络变量筛选——基于BP的神经网络变量筛选183 本例将结合BP神经网络应用平均影响值（MIV，Mean Impact Value）方法来说明如何使用神经网络来筛选变量，找到对结果有较大影响的输入项，继而实现使用神经网络进行变量筛选。 第21章 LVQ神经网络的分类——乳腺肿瘤诊断188 威斯康星大学医学院经过多年的收集和整理，建立了一个乳腺肿瘤病灶组织的细胞核显微图像数据库。数据库中包含了细胞核图像的10个量化特征（细胞核半径、质地、周长、面积、光滑性、紧密度、凹陷度、凹陷点数、对称度、断裂度），这些特征与肿瘤的性质有密切的关系。因此，需要建立一个确定的模型来描述数据库中各个量化特征与肿瘤性质的关系，从而可以根据细胞核显微图像的量化特征诊断乳腺肿瘤是良性还是恶性。 第22章 LVQ神经网络的预测——人脸朝向识别198 现采集到一组人脸朝向不同角度时的图像，图像来自不同的10个人，每人5幅图像，人脸的朝向分别为：左方、左前方、前方、右前方和右方。试创建一个LVQ神经网络，对任意给出的人脸图像进行朝向预测和识别。 第23章 小波神经网络的时间序列预测——短时交通流量预测208 根据小波神经网络原理在MATLAB环境中编程实现基于小波神经网络的短时交通流量预测。 第24章 模糊神经网络的预测算法——嘉陵江水质评价218 根据模糊神经网络原理，在MATLAB中编程实现基于模糊神经网络的水质评价算法。 第25章 广义神经网络的聚类算法——网络入侵聚类229 模糊聚类虽然能够对数据聚类挖掘，但是由于网络入侵特征数据维数较多，不同入侵类别间的数据差别较小，不少入侵模式不能被准确分类。本案例采用结合模糊聚类和广义神经网络回归的聚类算法对入侵数据进行分类。 第26章 粒子群优化算法的寻优算法——非线性函数极值寻优236 根据PSO算法原理，在MATLAB中编程实现基于PSO算法的函数极值寻优算法。 第27章 遗传算法优化计算——建模自变量降维243 在第21章中，建立模型时选用的每个样本（即病例）数据包括10个量化特征（细胞核半径、质地、周长、面积、光滑性、紧密度、凹陷度、凹陷点数、对称度、断裂度）的平均值、10个量化特征的标准差和10个量化特征的最坏值（各特征的3个最大数据的平均值）共30个数据。明显，这30个输入自变量相互之间存在一定的关系，并非相互独立的，因此，为了缩短建模时间、提高建模精度，有必要将30个输入自变量中起主要影响因素的自变量筛选出来参与最终的建模。 第28章 基于灰色神经网络的预测算法研究——订单需求预测258 根据灰色神经网络原理，在MATLAB中编程实现基于灰色神经网络的订单需求预测。 第29章 基于Kohonen网络的聚类算法——网络入侵聚类268 根据Kohonen网络原理，在MATLAB软件中编程实现基于Kohonen网络的网络入侵分类算法。 第30章 神经网络GUI的实现——基于GUI的神经网络拟合、模式识别、聚类277 为了便于使用MATLAB编程的新用户，快速地利用神经网络解决实际问题，MATLAB提供了一个基于神经网络工具箱的图形用户界面。考虑到图形用户界面带来的方便和神经网络在数据拟合、模式识别、聚类各个领域的应用，MATLAB R2009a提供了三种神经网络拟合工具箱（拟合工具箱/模式识别工具箱/聚类工具箱）。
- APP内置IM 系统——从入门到千万级在线
IM （即时通讯）系统是一种大型实时系统，其对技术方面的要求非常高。在APP社交化的今天，很多APP都希望为自己的应用增加IM系统，但却不得其法。本课程抽丝剥茧，搭建一套简IM 系统，先让开发者了解如何实现这类系统，然后会不断的对系统进行扩展，并详述要支撑千万级别的用户，系统架构要经过哪些方面的演变，在每个阶段需要具体考量哪些因素；其中涉及到大型网络开发、协议的制定解析、数据库的优化、负载均衡、监控、测试等方面的知识。相信通过此课程，开发者对IM 系统将有一个全面的认识。 a:0:{}
- VSCode launch.json配置详细教程
主要介绍了vscode 的node.js debugger 的 launch.json 配置详情,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
- 从零基础开始用Python处理Excel数据.pdf
首先学习Python的基础知识，然后使用Python来控制Excel，做数据处理。 Excel使用者、Python爱好者、数据处理人员、办公人员等 第1章 python基础 1.1 什么是python？ 1.2 为什么要学习用Python处理Excel表格？ 1.3 手把手教你安装python程序 1.3.1 下载python 1.3.2 安装python 1.3.3 验证是否安装成功 1.4 安装Python集成开发工具PyCharm 1.4.1 下载 1.4.2 安装 1.5 Python的输入与输出