<!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" xmlns:xlink="http://www.w3.org/1999/xlink" lang="zh_CN" xml:lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>11111111111</title>
<script type="text/javascript" >
function sAlert(txt,button,title)
{
//var eSrc=(document.all)?window.event.srcElement:arguments[1]; document.body.scrollHeight+
//遮盖层
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = "1000px";
shield.style.background = "#333";
shield.style.textAlign = "center";
//zIndex=10000
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=0)";
shield.style.opacity = 0;
//弹出层
var alertFram = document.createElement("DIV");
alertFram.id="alertFram";
alertFram.style.position = "absolute";
alertFram.style.left = "60%";
alertFram.style.top = "40%";
alertFram.style.marginLeft = "-225px" ;
alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";
alertFram.style.width = "200px";
alertFram.style.height = "175px";
alertFram.style.background = "#ccc";
alertFram.style.textAlign = "center";
alertFram.style.lineHeight = "150px";
//弹出层的zIndex=10001
alertFram.style.zIndex = "10001";
strHtml = "<ul style=\"list-style:none;margin:0px;padding:0 0 0 0px;width:100%\">\n";
strHtml += " <li style=\"background:#4477BB;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #4477BB;\">title</li>\n";
strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #4477BB;border-right:1px solid #4477BB;\">"+txt+"</li>\n";
strHtml += " <li style=\"background:#4477BB;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #4477BB;\"><input type=\"button\" value=\" \" id=\"do_OK\" onclick=\"doOk()\" /></li>\n";
strHtml += "</ul>\n";
alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);
document.getElementById("do_OK").value=button;
//设置滤镜效果
this.setOpacity = function(obj,opacity){
if(opacity>=1)opacity=opacity/100;
try{ obj.style.opacity=opacity; }catch(e){}
try{
if(obj.filters.length>0&&obj.filters("alpha")){
obj.filters("alpha").opacity=opacity*150;
}else{
obj.style.filter="alpha(opacity=\""+(opacity*150)+"\")";
}
}catch(e){}
}
var c = 0;
this.doAlpha = function(){
if (++c > 20){clearInterval(ad);return 0;}
setOpacity(shield,c);
}
var ad = setInterval("doAlpha()",1);
this.doOk = function(){
document.body.removeChild(alertFram);
document.body.removeChild(shield);
document.body.onselectstart = function(){return true;}
document.body.oncontextmenu = function(){return true;}
}
document.getElementById("do_OK").focus();
document.body.onselectstart = function(){return false;}
document.body.oncontextmenu = function(){return false;}
}
</script>
</script>
</head>
<body >
<input type="button" value="go" onclick="sAlert('go','button','title');" />
</body>
</html>
分享到：
相关推荐
JavaScript弹出层是一种常见的网页交互元素，常用于展示图片预览、消息提示或者表单填写等场景。在电商网站如凡客诚品和京东商城上，这种效果被广泛使用，以提供用户更好的浏览体验。本知识点将深入探讨如何利用...
jQuery的API丰富多样，包括选择器（如`$("#id")`，`.class`等）、遍历方法（如`.each()`)以及动画方法（如`.fadeIn()`, `.slideUp()`等），这些都是创建弹出层时可能会用到的关键工具。 “弹出层”标签强调了这个...
在这个特定的项目中，我们关注的是如何使用JavaScript实现机票城市选择的功能，同时结合下拉层和弹出层的设计，并确保在不同浏览器以及iframe环境下都能正常工作。 首先，我们需要理解下拉层和弹出层的概念。下拉层...
5. JavaScript或jQuery：为了实现弹出层的显示、隐藏以及与用户的交互，可能需要编写一些JavaScript代码，例如事件监听和DOM操作。 总结来说，"微博弹出层"是一个利用HTML和CSS技术构建的，具有圆角效果且用户体验...
这项技术的实现通常涉及到JavaScript（JS）编程，它允许用户通过鼠标操作来改变弹出层的位置和尺寸，提升用户体验。 首先，我们来详细解释一下弹出层拖拽的实现原理。在JavaScript中，我们可以通过监听鼠标的`...
总结来说，创建“很简单的弹出层”涉及了HTML结构的设计，CSS样式和布局的调整，以及JavaScript交互逻辑的编写。确保兼容所有浏览器，通常需要对旧版本的Internet Explorer进行特殊处理，可能需要用到polyfill库或者...
描述中提到的“基于jquery项目中用到的dialog弹出层”，意味着在实际的jQuery项目开发中，Dialog常被用于增强用户体验，提供额外的信息展示或者获取用户输入。它能够轻松地嵌入到现有的HTML结构中，通过调用jQuery...
编写弹出层和遮罩层，我们主要需要用到HTML、CSS和JavaScript。以下是一个简单的实现步骤： 1. **HTML结构**： 创建一个`div`元素作为弹出层，并在内部包含需要展示的内容。同时，还需要创建一个全屏的`div`元素...
在网页开发中，jQuery弹出层是一个非常常见且实用的功能，它用于在用户与页面交互时展示额外的信息或提供互动式操作。这个“Jquery自定义弹出层”主题涵盖了许多关键知识点，包括jQuery库的基本使用、DOM操作、事件...
7. 使用须知.txt：这个文件可能包含关于如何使用这个代码示例的说明，包括如何在自己的项目中引入jQuery库、如何初始化可拖动弹出层、可能需要的CSS类和ID，以及任何特定的注意事项。 8. 132689905389019506.js或....
本项目“jquery-仿苏宁易购每天首页出现广告弹出层.rar”是一个实例，演示如何利用jQuery来模拟苏宁易购电商网站上常见的广告弹出窗口效果。这个效果通常用于吸引用户的注意力，展示促销信息或者新品推荐。 首先，...
尽管描述为空，我们可以假设这篇文章详细介绍了如何实现这样的弹出层，可能包括了HTML结构、CSS样式以及JavaScript代码的编写。通过阅读该博文，开发者可以学习到如何利用现代前端技术创建具有阴影和自适应功能的弹...
在“jQuery分页弹出层类似下拉框选择”的实现中，它将传统的分页链接或按钮替换为一个弹出层，这个弹出层的行为类似于下拉框，当用户点击后，会展示可选择的页码，而不是直接跳转到新页面。 要实现这样的功能，首先...
本文将深入探讨“CustomDropDownListStyling”这个jQuery插件，它是用于弹出层表单元素，特别是下拉列表（DropDownList）的样式定制。这个插件可以帮助开发者创建具有更美观和用户友好的界面，提升用户体验。 首先...
关于js点击任意区域弹出层消失的实现，首先需要了解的是，该功能通常应用于Web页面上，通过JavaScript（特别是使用了jQuery库的情况下）来控制页面元素的显示和隐藏。在给定的文件中，实现这一功能的基本逻辑是通过...
这可以通过添加一个半透明的遮罩层和在中心位置显示的弹出框来实现。 6. **回调函数**：在成功、失败或加载过程中，可能会需要执行特定的代码。这时，可以为弹出框添加回调函数，例如`myPopup('success', function...
这可能需要用到CSS的定位（positioning）和z-index属性来调整层叠顺序，让弹出框位于父页面内容之上，而遮罩层位于最顶层。 6. **易于使用**：由于描述中提到，所有代码都在子页面内部，这意味着用户只需要在子页面...
现在让我们详细解析一下给定的代码示例，它展示了一个简单的弹出层实现实例： ```html <script type="text/javascript"> $(function(){ // 当点击按钮btnShow时，弹出层显示 $("#btnShow").click(function(){ $...
JavaScript仿腾讯“网眼”弹出提示层是一种常见的前端交互设计，主要目的是提供一种轻量级的提示方式，用户在浏览网页时，当鼠标悬停在某个链接或元素上时，会弹出一个包含相关信息的小窗口，类似于腾讯的“网眼”...
在引入了必要的CSS和JS文件后，我们可以通过编写jquery代码来实现弹出层功能。在下面的例子中，当用户点击一个按钮时，会弹出一个询问是否修改考勤的对话框，并且根据用户的操作显示相应的提示信息。 ```html <!-- ...