`
nianshi
  • 浏览: 416287 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

js弹出div对话框（1，透明，2带拖动功能）

浏览器IEOperaHTML 
阅读更多

 

（很好用的）js弹出div对话框（1，透明，2带拖动功能） JS DIV 弹出

<html>
<head>
<script>
function sAlert(txt)
{
//var eSrc=(document.all)?window.event.srcElement:arguments[1];
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
//window.alert(document.body.scrollHeight);
shield.style.height = document.body.scrollHeight+"px";
shield.style.background = "white";
shield.style.textAlign = "center";
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=80)";
shield.style.opacity = 0.8;
//shield.style.border-width=thick;

strHtml = "<input type=\"button\" value=\" 确 定 \" id=\"do_OK\" onclick=\"doOk()\" />\n";
shield.innerHTML = strHtml;

document.body.appendChild(shield);
this.doOk = function(){
document.body.removeChild(shield);

}
document.getElementById("do_OK").focus();
}
</script>
</head>
<body >
<input type=button onclick="sAlert('登陆成功！')" value=登陆>

<p align=center><select><option>---</option></select></p>
</body>
</html>
=============================================================

 


<html>
<head>
<script>

var dragapproved=false
var minrestore=0 //该变量表示窗口目前的状态，0表示初始化状态，1表示最大化状态
var initialwidth,initialheight
//若Client浏览器为IE5.0以上版本的
var ie5=document.all&&document.getElementById
//若Client浏览器为NetsCape6。0版本以上的
var ns6=document.getElementById&&!document.all

function iecompattest(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px"
}
}

function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
document.getElementById("dwindowcontent").style.display="none" //此句代码可不要
tempx=parseInt(document.getElementById("dwindow").style.left)
tempy=parseInt(document.getElementById("dwindow").style.top)

dragapproved=true
document.getElementById("dwindow").onmousemove=drag_drop
}

function loadwindow(width,height){
if (!ie5&&!ns6) //若不为IE或Netscpae浏览器，则使用一般的Window.open进行弹出窗口处理
//window.open(url,"","width=width,height=height,scrollbars=1")
{

}
else{
document.getElementById("dwindow").style.display='';
document.getElementById("dwindow").style.width=initialwidth=width+"px";
document.getElementById("dwindow").style.height=initialheight=height+"px";
document.getElementById("dwindow").style.left="300px";
document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px";
//document.getElementById("cframe").src=url
}
}

function maximize(){
if (minrestore==0){
minrestore=1 //maximize window
document.getElementById("maxname").setAttribute("src","layout.png")
document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
}
else{
minrestore=0 //restore window
document.getElementById("maxname").setAttribute("src","layout.png")
document.getElementById("dwindow").style.width=initialwidth
document.getElementById("dwindow").style.height=initialheight
}
document.getElementById("dwindow").style.left=ns6? window.pageXOffset+"px" : iecompattest().scrollLeft+"px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset+"px" : iecompattest().scrollTop+"px"
}

function closeit(){
document.getElementById("dwindow").style.display="none"

}

function stopdrag(){
dragapproved=false;
document.getElementById("dwindow").onmousemove=null;
document.getElementById("dwindowcontent").style.display="" //extra
}

</script>
</head>

<body>

<div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">
<div align="right" style="background-color:navy">
<img src="layout.png" id="maxname" onClick="maximize()">
<img src="icon_delete.gif" onClick="closeit()"></div>
<div id="dwindowcontent" style="height:100%">

</div>
</div>

<input type="button" value="弹出窗口" onclick='loadwindow(300,200);'>

</body>
</html>


（收集的很好用的）js弹出div对话框（1，透明，2带拖动功能） JS DIV 弹出，用后记得发表下意见哦.

分享到：
| JS弹出DIV对话框透明遮罩效果，挺不错
评论
1 楼 ipanel420 2011-11-22  
还不错啊
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jqurry弹出div对话框

    jQuery弹出div对话框是一种常见的网页交互功能，用于在页面上显示临时通知、用户确认、表单输入等信息。在Web开发中，jQuery库提供了一种简洁高效的方式来实现这一功能，而无需依赖复杂的插件。下面我们将深入探讨...

    jquery弹出登录对话框

    在本文中，我们将深入探讨如何利用jQuery库创建一个弹出登录对话框，为用户提供无缝且直观的登录功能。 一、jQuery简介 jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及...

    页面中弹出对话框div

    在网页设计中，"页面中弹出对话框div"是一个常见的需求，用于向用户展示临时信息、确认操作或收集输入。对话框通常不离开主页面，而是覆盖在内容上，提供一种交互方式。本篇文章将深入探讨如何使用HTML的div元素来...

    js漂亮弹出层 对话框

    在本文中，我们将深入探讨JavaScript弹出层的设计原则、实现方法以及一些实用的库和技巧。 首先，JavaScript是一种广泛用于网页动态交互的编程语言，它可以创建交互式的用户界面，包括弹出层。弹出层通常分为两种...

    js弹出对话框 源代码

    JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态效果的实现。...对于更复杂的对话框功能，如拖动、模态效果等，还可以进一步探索和学习相关的JavaScript库，如SweetAlert2或jQuery UI Dialog。

    JS弹出Div窗口(可拖拽)

    在“JS弹出Div窗口(可拖拽)”的压缩包中，可能包含HTML文件用于展示Demo，JavaScript文件包含了实现弹出和拖动功能的代码，以及CSS文件用于样式定义。通过分析和学习这些文件，开发者可以理解并掌握如何在自己的项目...

    使用html+css+js实现自定义弹出对话框/输入框

    在实现弹出对话框时，我们需要创建一个包含对话框元素的容器，例如`&lt;div&gt;`，并设置相应的ID或类名以便于CSS和JavaScript操作。例如： ```html &lt;div id="popup-dialog" class="popDrag"&gt; 自定义对话框 请输入内容...

    jquery div 可拖拽弹出对话框 .

    在这个场景中，"jquery div 可拖拽弹出对话框" 指的是利用 jQuery 实现的一个功能，允许用户可以手动拖动 HTML 的 `div` 元素（通常用于创建对话框或模态窗口）在页面上自由移动。这种功能提高了用户体验，让用户...

    页面弹出各种对话框的代码

    在网页开发中，有时我们需要与用户进行交互，这时页面弹出的对话框就显得尤为重要。对话框可以用于提示信息、确认操作或者获取用户输入。在本主题中，我们将深入探讨如何利用JavaScript和HTML来实现页面上的各种...

    不错的JS弹出对话框插件 artDialog

    `artDialog` 是一个功能强大的JavaScript弹出对话框插件，以其简洁的API和丰富的自定义选项深受前端开发者喜爱。它允许开发者轻松创建各种类型的对话框，如提示、确认、警告以及自定义内容的对话框，同时提供了内置...

    最中间弹出对话框,遮罩层 可以拖动

    1. **中间弹出对话框**：要让对话框始终位于页面中央，我们需要计算窗口大小和对话框的大小，然后设置对话框的位置。这通常通过CSS和JavaScript配合实现。CSS用来定义对话框的基本样式，如边框、背景、阴影等；...

    js控制弹出对话框js控制弹出对话框

    1. `alert()` 函数：`alert()` 是JavaScript中最基本的对话框，它会弹出一个带有消息的警告对话框，并且有一个“确定”按钮。例如： ```javascript alert("你好，这是一个警告对话框！"); ``` 这行代码会在...

    JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口/对话框控件 js javascript 对话框

    在JavaScript编程领域中，创建可拖动窗口控件和弹出提示框是常见的需求，尤其在Web应用中，用户交互的界面设计至关重要。本资源提供了一种解决方案，它是一个基于JavaScript和CSS的可定制对话框控件，允许开发者创建...

    js弹出可移动对话框

    这个实例中，`js弹出可移动窗口实例_现用.html`应该包含了完整的HTML和JavaScript代码，可以直接在浏览器中运行。用户可以通过点击“打开”按钮来显示对话框，然后可以通过鼠标拖动来移动对话框的位置。当用户点击...

    弹出div拖动层

    标题“弹出div拖动层”所指的就是这样一个功能，它允许用户通过鼠标来移动一个浮层div，这种功能常见于对话框、提示窗口或者自定义菜单等元素。下面我们将深入探讨这个主题，包括div的基本概念、拖动功能的实现以及...

    js 弹出窗口 弹出div window 支持遮罩、拖动、嵌入页面、换肤等实用功能

    在本文中，我们将深入探讨如何利用JavaScript实现一个弹出div窗口，包括支持遮罩、拖动、嵌入页面和换肤等功能。 首先，让我们了解“弹出窗口”或“弹出层”的概念。在网页设计中，弹出窗口通常指的是不依赖浏览器...

    模仿MSN弹出对话框.rar

    "模仿MSN弹出对话框"这个项目，就是利用JavaScript来创建一个类似于微软即时通讯软件MSN的对话框效果，使得用户在网页上能够体验到类似的交互功能。 在JavaScript特效中，弹窗漂浮是一种常见的应用，它通常用于显示...

    div_js_mask_IE蒙板+对话框

    div+js实现的弹出对话框，调用简单，可拖动，父页面禁止并半透明。弹出框可内嵌功能页面，也可去掉“iframe”然后做成单纯的对话框。 在windowsXP sp2下的 IE8、firefox3.5、opera10、傲游、TT浏览器、搜狗浏览器、...

    4种不同类型的jQuery弹出层对话框

    上述三种对话框是JavaScript的基本功能，而jQuery则提供了更高级的自定义弹出层选项，比如使用插件如jQuery UI的Dialog组件。这允许开发者创建样式可定制、功能丰富的对话框，包括关闭按钮、拖动功能、自定义内容等...

    jQuery网页弹出对话框 jQuery网页弹出对话框特效.zip

    这段代码会在页面加载完成后将ID为"dialog"的div元素转化为一个带有标题“基本对话框”的弹出对话框。 除了基本对话框，jQuery UI的`.dialog()`方法还支持许多自定义选项，例如设置宽度、高度、是否可拖动、是否...

Magicbox
Global site tag (gtag.js) - Google Analytics