javascript实现的弹出层背景置灰-模拟(easyui dialog)

页面比较丑，只把功能实现了。^ ^


代码如下:

<title>模仿easyui dialog的效果</title>
<script>
//取得页面元素
var getElement = function() {
return document.getElementById(arguments[0]) || false;
}
function openDialog(dialogId) {
var maskId = "mask";
//如果有，先删除原来的
if (getElement(dialogId)) {
document.removeChild(getElement(dialogId));//删除操作：弹出的div
}
if (getElement(maskId)) {
document.removeChild(getElement(maskId));//删除操作：弹出的不可操作(面具)层
}

//背景置灰
var maskDiv = document.createElement("div");
maskDiv.id = maskId;
maskDiv.style.position = "absolute";
maskDiv.style.zIndex = "1";
maskDiv.style.width = document.body.scrollWidth + "px";
maskDiv.style.height = document.body.scrollHeight + "px";
maskDiv.style.top = "0px";
maskDiv.style.left = "0px";
maskDiv.style.background = "gray";
maskDiv.style.filter = "alpha(opacity=10)";
maskDiv.style.opacity = "0.30";//透明度
document.body.appendChild(maskDiv);//向body之中增加背景层

//Dialog
var dialogDiv = document.createElement("div");
dialogDiv.id = dialogId;
dialogDiv.style.position = "absolute";
dialogDiv.style.zIndex = "9999";
dialogDiv.style.width = "400px";
dialogDiv.style.height = "200px";
dialogDiv.style.top = (parseInt(document.body.scrollHeight) - 200) / 2 + "px"; // 屏幕居中
dialogDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px"; // 屏幕居中
dialogDiv.style.background = "white";
dialogDiv.style.border = "1px solid gray";
dialogDiv.style.padding = "5px";
dialogDiv.innerHTML = "(Dialog Content)";
//Dialog之中的关闭操作：关闭背景层和Dialog层
var closeControlloer = document.createElement("a");//创建一个超链接(做为关闭的触发)
closeControlloer.href = "#";
closeControlloer.innerHTML = "关闭";
closeControlloer.onclick = function() {
document.body.removeChild(getElement(dialogId));//删除diaglog
document.body.removeChild(getElement(maskId));//删除背景层
}
dialogDiv.appendChild(closeControlloer);//dialog之中增加"关闭"操作
document.body.appendChild(dialogDiv);//body之中增加dialog
}
</script>
<a href="#" onclick="openDialog('dialog');">Open Dialog</a>

赞 (0)

相关推荐

  • js showModalDialog弹出窗口实例详解

    showModalDialog:模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法. 使用方法:  vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 参数说明:  sURL--  必选参数,类

  • jQuery弹出框代码封装DialogHelper

    看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙.思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见. 复制代码 代码如下: //require ScrollHelper.js function DialogHelper() {     var _this

  • js showModalDialog 弹出对话框的简单实例(子窗体)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="showdialog_dialog.aspx.cs" Inherits="WSHelpDoc_showdialog_dialog" %> 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

  • Dialog底部弹出自定义view并且伴随动画弹出和消失

    Dialog底部弹出自定义view并且伴随动画弹出和消失

    原图 点击后 代码 @Override public void onClick(View view) { switch (view.getId()) { //加号逻辑 case R.id.iv_more: AlertDialog.Builder builder = new android.app.AlertDialog.Builder(this,R.style.remind_dialog); LayoutInflater inflater = LayoutInflater.from(this);

  • 父页面显示遮罩层弹出半透明状态的dialog

    父页面显示遮罩层弹出半透明状态的dialog

    上一章我介绍了遮罩的页面可增加部分区域编辑模块,这章将介绍父页面显示遮罩层,弹出半透明状态的dialog.dialog即弹出的子页面,div. 效果图如下:  具体代码实现如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <MET

  • Android 中从屏幕左下角弹出Dialog动画效果的实现代码

    MainActivity代码: import android.app.Dialog; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.Window; import androi

  • javascript实现的弹出层背景置灰-模拟(easyui dialog)

    javascript实现的弹出层背景置灰-模拟(easyui dialog)

    页面比较丑,只把功能实现了.^ ^ 复制代码 代码如下: <title>模仿easyui dialog的效果</title> <script> //取得页面元素 var getElement = function() { return document.getElementById(arguments[0]) || false; } function openDialog(dialogId) { var maskId = "mask"; //如果有,

  • Js Jquery创建一个弹出层可加载一个页面

    复制代码 代码如下: <!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=gb2312"

  • js与css实现弹出层覆盖整个页面的方法

    本文实例讲述了js与css实现弹出层覆盖整个页面的方法.分享给大家供大家参考.具体实现方法如下: 弹出层透明背景加框的常用样式和结构如下: 复制代码 代码如下: .alertMessageBg{ position:fixed; _position:absolute; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); z-

  • js登录弹出层特效

    复制代码 代码如下: <!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=&qu

  • jQuery实现渐变弹出层和弹出菜单的方法

    本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh

  • 点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码

    复制代码 代码如下: <html><head><title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/cs

  • javascript弹出层输入框(示例代码)

    如下所示: 复制代码 代码如下: <script language="javascript" type="text/javascript">         function alertWin(title, msg, w, h) { var titleheight = "22px"; // 窗口标题高度             var bordercolor = "#666699"; //窗口的边框颜色      

  • js+CSS实现弹出居中背景半透明div层的方法

    本文实例讲述了js+CSS实现弹出居中背景半透明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

  • 纯JavaScript实现的完美渐变弹出层效果代码

    纯JavaScript实现的完美渐变弹出层效果代码

    如题,本文将使用纯粹的脚本JavaScript实现渐变的弹出层,其想法也非常简单:利用IFrame实现遮盖,再借助一个DIV用于展现弹出层的内容,最后再使用其内置函数setInterval()和clearInterval()实现渐变,原理非常简单,只不过要注意对DOM对象/元素的精确控制.由于代码比较简单,在此就不再赘述.以下代码在IE6+,FF3.5+测试通过. 脚本Flyout.js: 复制代码 代码如下: // JScript File if (navigator.userAgent.to

  • 封装的原生javascript弹出层代码

    复制代码 代码如下: <script type="text/javascript">// <![CDATA[ /* @author: hongru.chen ** @date: 2010-09-15 ** @vision: 1.1 */ var Hongru = {}; function $(id){return document.getElementById(id)} Object.prototype.extend = function(target, /*opti

随机推荐