js实现简单模态窗口，背景灰显
没什么好说的，都是js，用一个iframe将页面遮挡，iframe上面一个div层，js面向对象做的，其中有部分是js动态生成style。
ModeWindow.js
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="ModeWindow.js"></script>
<script language="javascript" type="text/javascript">
var myWin;
function show1(){
var divtest = document.getElementById("divtest");
divtest.style.display="block";
myWin = new ModeWindow(divtest,200,300,300,100,"i change!");
myWin.show();
}
function show2(){
var tbtest = document.getElementById("tbtest");
tbtest.style.display="block";
//myWin = new ModeWindow(tbtest);
myWin = new ModeWindow(tbtest,200,200,200,222,"hello world!");
myWin.show();
}
function Winclose()
{
myWin.close();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="tbtest" style="display: none">
<tr>
<td style="width: 100px">
<input id="Text6" type="text" /></td>
<td style="width: 100px">
<input type="button" onclick="Winclose()" value="close" /></td>
</tr>
</table>
<div id="divtest" style="display: none">
<br />
<br />
我来了！<input type="button" onclick="Winclose()" value="close" />
</div>
<div align="center">
<table width="800" height="500">
<tr>
<td style="width: 100px">
<input id="Text2" type="text" /></td>
<td style="width: 100px">
<input id="Text1" type="text" /></td>
<td style="width: 100px">
<input id="Text3" type="text" /></td>
<td style="width: 100px">
<input id="Text4" type="text" /></td>
<td style="width: 100px">
<input id="Text5" type="text" /></td>
</tr>
<tr>
<td style="width: 100px">
<input type="button" onclick="show2()" value="open table" /></td>
<td style="width: 100px">
<input type="button" onclick="show2()" value="open table" /></td>
<td style="width: 100px">
<input type="button" onclick="show2()" value="open table" /></td>
<td style="width: 100px">
<input type="button" onclick="show1()" value="open div" /></td>
<td style="width: 100px">
<input type="button" onclick="show1()" value="open div" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
在线演示 http://img.jb51.net/online/ModeWindow/index.htm
相关推荐
-
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ
-
js关闭模态窗口刷新父页面或跳转页面
有两个窗口: A窗口(父),B窗口(模态) A窗口里有一个DATAGRID,一个按钮. 点击按钮时,弹出B窗口(模态).在B窗口中添加数据,提交后,要求B窗口自关闭,然后刷新A窗口(父) 复制代码 代码如下: <script type="text/javascript"> function openSubWin() { window.showModalDialog('b.html', 'newwindow', 'height=500, width=400, top=0, l
-
javascript Demo模态窗口
下面这个Demo支持回调,可以直接引用modalDialog.js使用,不存在任何Jquery的影子 global.js 复制代码 代码如下: window.js = new myJs(); //为了避免名称重复我们换个名称,附加一个myJs对像到window对象上,然后我们在页面中调用window.js //js对象 function myJs() { this.x = 10; } //下面我们对myJs进行扩展 myJs.prototype.alert = function (msg) {
-
JS模态窗口返回值兼容问题的完美解决方法
因系统要兼容原IE已使用的关闭方法,经调试测得,需对window.dialogArguments进行再较验,不然易出问题. function OKEnd(vals) { if (vals == null) vals = "TRUE"; if (typeof (window.opener) == "undefined") { if (typeof (window.dialogArguments) != "undefined") { if (wind
-
js操作模态窗口及父子窗口间相互传值示例
parent.hmtl 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset
-
javascript 获取模态窗口的滚动位置代码
实验了一下午,到现在终于解决的了模态窗口的滚动位置获取办法,现在来分享一下, 其实很简单,给你的弹出模态窗口的div块设置一个id, 在js中通过 document.getElementById('divID').scrollLeft 这样获取的是向右滚动的值 同理,scrollTop 就是向下滚动的值, 其实很简单,那就说到这里
-
js实现简单模态窗口，背景灰显
没什么好说的,都是js,用一个iframe将页面遮挡,iframe上面一个div层,js面向对象做的,其中有部分是js动态生成style.ModeWindow.js 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="M
-
js实现简单模态框实例
模态框在网页中很常见就是在当前页面中弹出一个框供与客户交互. 类似于这样. 首先我们要明白该框工作原理至于怎样与后端进行交互联系这边先不做介绍我们首先是单纯的了解怎样在网页中实现这样的一个框图的显现.值得注意的是框图产生时一般的我们滚动鼠标发现网页仍在移动.实现这样框图就是加了两个盒子 第一个盒子实现背景: 将整个页面覆盖(透明色) 第二个盒子实现交互框. 小编这边来实现一个最简单的交互框(代码量可能相对多了一点,主要是因为样式多了一点整体结构还是非常简单的) 代码如下: 模拟框最关键的一步就是
-
jquery div模态窗口的简单实例
jquery div模态窗口的简单实例 <!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> <title>
-
JS实现简单可拖动的模态框
本文实例为大家分享了JS实现简单可拖动的模态框的具体代码,供大家参考,具体内容如下 这篇博文有 简单实现 和 带样式且稍微复杂一点 的两个版本 简单版本 效果图: 实现思路: 给可拖动部分添加点击事件,触发时计算鼠标在可拖动部分中的坐标( e.pageX - box.offsetLeft ),得到 x y . 给 document 添加鼠标移动事件,因为当鼠标拖动模态框的时候,是在整个DOM窗口内移动的.保持鼠标与模态框的相对位置不变,所以需要计算此时的模态框的位置(e.pageX - x ),
-
原生js实现简单的模态框示例
html部分: <img src="images/8.jpg" alt=""> <button class="btn" id="showMax">显示大图</button> <div id="modalBox" class="modalBox"> <div class="modalBox-matter"> &
-
JS实现简单易用的手机端浮动窗口显示效果
本文实例讲述了JS实现简单易用的手机端浮动窗口显示效果.分享给大家供大家参考,具体如下: html: <style type="text/css"> .fdBonTel{ width:100%; height:53px; position:fixed; background:#0052ae; text-align:center; left:0; bottom:0; z-index:999; } .fdOnline{ background:url(index/images/o
-
js实现简单广告小窗口
本文实例为大家分享了js实现简单广告小窗口的具体代码,供大家参考,具体内容如下 一.目标 利用js实现简易的无法关掉的广告小窗口功能 二.实现步骤 1.设置小窗口样式: 2.在JavaScript中绑定左上角X的事件,使其可以点击,但是关不掉,并且在一个指定范围内随机移动位置: 3.设置点击20下(可改变数字)小窗口自动消失. 三.代码模块 1.css部分 <style> .box { width: 180px; height: 180px; background: #f0f0f0; posi