文档章节

纯 JS 写 模态弹出层

redfox2008
 redfox2008
发布于 2016/07/01 18:18
字数 539
阅读 31
收藏 0

纯 JS 写 模态弹出层,具体看代码吧。。大家都懂的.......我就不多说了....

HTML 页里的使用:

<!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>JS_Dlg</title>

<script src="dlg.js" type="text/javascript"></script>
</head>

<body>
<input type="button" value="点一下" onclick="d.open('titleMessage','contentInformation');"/>
<input type="button" value="点一下" onclick="d.open('Red-fox 温馨提示','这个是什么啊?你怎么不给我讲清楚啊?呵呵');"/>

<div style="height:700px; background-image:url(bk.jpg); width:1200px;"></div>



<script type="text/javascript">

var d=new DialogBox("MainId","DialogId","TitleID","ContentID");
/*

使用时只要在网页里构造一个对话框实例。然后分配好各ID 就行了。。

在要打开模态层时,只要用 实例.open('标题文字',‘提示信息’);
当然,这里的 标题文字,提示信息 得可以是html格式 的...

如:
<input type="button" value="点一下" onclick="d.open('Red-fox 温馨提示','这个是什么啊?你怎么不给我讲清楚啊?呵呵');" />

*/
</script>
</body>
</html>

 

JS代码:

 

// JavaScript Document

function DialogBox(MainDlgID,DlgID,TitleID,ContentID)
{
this.MainID=MainDlgID;//背景层的ID
this.DlgID=DlgID; //对话框 层ID
this.TitleID=TitleID; //对话框标题栏 层Id
this.ContentID=ContentID; //对话框信息框 层Id

//---------------------------------------------------------大框(背景层)------------------------
var MainNode=document.createElement("div");

MainNode.setAttribute(
"id",this.MainID);
MainNode.style.backgroundColor
="#000000";

MainNode.style.left
="0px";
MainNode.style.top
="0px";
MainNode.style.width
="0px";
MainNode.style.height
="0px";

MainNode.innerHTML
="";
MainNode.style.position
="absolute";
MainNode.style.zIndex
="100";

MainNode.style.display
="none";

if(MainNode.filters)
{
MainNode.style.filter
="alpha(opacity=70)";
}
else
{
MainNode.style.opacity
="0.7";
}

//--------------------------------------------------------- 对话框----------------
var dlgNode=document.createElement("div");
dlgNode.setAttribute(
"id",this.DlgID);
dlgNode.style.backgroundColor
="#FF7800";
dlgNode.style.zIndex
="1020";
dlgNode.style.display
="none";

dlgNode.style.left
="0px";
dlgNode.style.top
="0px";

dlgNode.style.width
="300"+"px";
dlgNode.style.height
="200"+"px";

dlgNode.innerHTML
="";
dlgNode.style.color
="#890987";
dlgNode.style.position
="absolute";

//-----------------------------------------------------title-----------------------

var TitleNode=document.createElement("div");
TitleNode.setAttribute(
"id",this.TitleID);
TitleNode.style.backgroundColor
="#FFFFFF";
TitleNode.style.width
="100%";
TitleNode.style.height
="30"+"px";
TitleNode.innerHTML
="Title";
TitleNode.style.color
="#890117";

//-----------------------------------------------------Information-----------------

var InforNode=document.createElement("div");
InforNode.setAttribute(
"id",this.ContentID);
InforNode.style.backgroundColor
="#CCCCCC";
InforNode.style.width
="100%";
InforNode.style.height
="100%";
InforNode.innerHTML
="Content";
InforNode.style.color
="#890117";

//-----------------------------------------------------各节点加入Dom------------

dlgNode.appendChild(TitleNode);
dlgNode.appendChild(InforNode);
document.body.appendChild(dlgNode);
document.body.appendChild(MainNode);
}
//====================================================================================

//打开对话框-------------------------------------------------------------------------
DialogBox.prototype.open=function(titleText,informaton)
{
document.getElementById(
this.TitleID).innerHTML="<table border='0px' width='100%'><tr><td style='text-align:left;width:70%;'>"+titleText+"</td><td style='text-align:right;width:30%;'><input type='button' onclick='javascript:document.getElementById(\""+this.MainID+"\").style.display=\"none\";document.getElementById(\""+this.DlgID+"\").style.display=\"none\";' value='关闭'/></td></tr></table>";
document.getElementById(
this.ContentID).innerHTML=informaton;

var Dwidth=document.documentElement.scrollWidth;
var Dheight=document.documentElement.scrollHeight;

var CHeight=document.documentElement.clientHeight;
var CWidth=document.documentElement.clientWidth;

var scrolltop=document.documentElement.scrollTop;

var Dlgwidth=document.getElementById(this.DlgID).style.width;
var DlgHeight=document.getElementById(this.DlgID).style.height;

document.getElementById(
this.MainID).style.width=Dwidth+"px";
document.getElementById(
this.MainID).style.height=Dheight+"px";

document.getElementById(
this.DlgID).style.left=(CWidth/2)-(parseInt(Dlgwidth)/2)+"px";
document.getElementById(
this.DlgID).style.top=(scrolltop+CHeight/2-parseInt(DlgHeight)/2)+"px";

document.getElementById(
this.MainID).style.display="block";
document.getElementById(
this.DlgID).style.display="block";

}






 

© 著作权归作者所有

redfox2008
粉丝 0
博文 23
码字总数 29088
作品 0
徐汇
私信 提问
纯 CSS3 效果资源收集整理

awesome-pure-css-no-javascript 纯 CSS + HTML,不使用 JavaScript,能实现怎样的视觉效果? 这里收集整理了一些相关资源与工具,欢迎各位到 https://github.com/Zhangjd/awesome-pure-css-...

bbtzjd
2016/03/19
217
0
窗口模态(model)的实现,让你点不着!

一、唠叨: 今天又重新认识了 bootstrap 这个强悍的UI,但是个人还是觉得在操作布局上面不是自己很能熟悉的。但是它的其他功能真心做的很好。值得深入学些研究的。今天我就简单来自己做一个模...

乐派电影
2014/04/15
239
0
Asp.net中使用javascrip的模态窗体的一点体会

将模块窗口的弹出丢在了一个公共类(Function)的方法里面进行处理(其实早就该这么做)。 eg: public string ModalWindow(string openAspxPage,int width,int height) { string js = string.For...

晨曦之光
2012/05/16
92
0
在WordPress中添加简书风格的连载目录和文章导航

需求 自从机缘巧合的开始翻译Gensis的系列教程,越来越沉迷于研究这款WordPress主题框架了,一边翻译一边学习一边也在自己的丘壑博客上实验。 最近又有了一个需求,想在该系列的每一篇上都加...

丘壑
03/06
0
0
【php增删改查实例】第二十七节 - 个人密码修改

当用户点击修改密码的时候,就弹出一个窗口。这里的弹窗,我们使用bootstrap提供的javascript插件。(modal) 我们就使用这个模态窗口。 模态窗口的代码: 在这个模态窗口中,找到class为 mo...

剽悍一小兔
2018/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 年迈渔夫遭黑帮袭抢

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享Elvis Presley的单曲《White Christmas》: 《White Christmas》- Elvis Presley 手机党少年们想听歌,请使劲...

小小编辑
今天
1K
20
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
16
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部