<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script type="text/javascript" language="javascript">
//more javascript from http://www.smallrain.net
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#c51100";//提示窗口的边框颜色
titlecolor="#c51100";//提示窗口的标题颜色
var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
window.location.reload();
window.location="#";
c.innerText="aaaaaaaaaa";
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
<input type="button" value="点击这里" onclick="sAlert('test弹窗效果3243');" /> //在按钮中添加事件
<div id="c"></div>
</BODY>
</HTML>
分享到：
相关推荐
本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考，具体如下： 运行效果图如下： 完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <...
页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮。 需要显示详情，但是不想从新写一个页面。所以选择弹出层，一层遮罩层，一层显示详情层，遮罩层的好处可以让用户在看详情的时候不能...
在这个"CSS+DIV+JQuery源码实现遮罩效果"的资源中，我们可以学习如何利用这三种技术来创建一个功能完备且视觉效果良好的遮罩层。 首先，CSS（Cascading Style Sheets）是网页样式表语言，主要用于定义HTML或XML...
首先，要实现点击按钮弹出带遮罩层的视频效果，需要熟练掌握HTML、CSS以及JavaScript的基础知识。具体的知识点可以分为以下几部分进行详细阐述。 1. HTML结构设计： 本文使用的HTML结构非常简单，主要包括四个部分...
现在，我们需要编写 jQuery 代码来实现遮罩层的显示、隐藏和自动关闭功能。在 `<script>` 标签中，添加以下代码： ```javascript $(document).ready(function() { // 全屏遮罩 function toggleFullScreenMask() {...
css3实现的点击按钮弹出无刷新交互遮罩层特效源码是一段实现了点击按钮后会直接弹出一个悬浮的无刷新交互遮罩层效果，在此遮罩层内会出现相关的内容及表单、按钮效果，功能非常强大且实用，本段代码适应于所有网页...
4. **事件绑定**：通常，我们会根据用户的行为（如点击按钮）来显示或隐藏遮罩。可以使用`addEventListener`来监听这些事件并调用相应的方法。 5. **可扩展性**：为了增强功能，可以考虑添加动画效果，比如淡入淡出...
- **弹窗提示**：在用户交互后，如点击按钮，会在目标元素上添加遮罩，突出显示相关信息。 - **加载指示器**：在页面加载过程中，遮罩可以作为加载动画的背景，提供更好的用户体验。 - **交互式导航**：遮罩可...
JavaScript库如jQuery和GreenSock也提供了实现遮罩效果的方法，这些库通常用于更复杂的交互和动画效果。例如，使用GreenSock可以创建一个动态的遮罩动画： ```javascript var mask = document.getElementById('mask...
实现全屏遮罩效果的方法多种多样，但通常涉及到HTML、CSS和JavaScript的配合。在HTML中，可以创建一个全屏的div元素作为遮罩层，并设置其CSS样式以覆盖整个屏幕。例如： ```html <div id="loading-mask"></div> ```...
在ASP.NET应用中，我们经常需要提供用户友好的交互体验，比如当用户点击按钮执行后台操作时，显示一个遮罩层来表示系统正在处理请求，处理完毕后自动恢复。这通常借助JavaScript库如jQuery来实现。本文将详细介绍...
在本教程中，我们学习了如何通过jQuery来实现一个单击按钮后，弹出一个带有遮罩层的对话框效果。这种效果通常用于在用户交互时提供反馈或者弹出重要信息。 #### 关键技术点 1. **引入jQuery库**：首先，需要引入...
在本文中，遮罩层被用于实现点击区域外弹出弹窗的效果。 在实现点击某区域以外弹出弹窗的过程中，关键的HTML结构包括一个触发区域（div），一个遮罩层（cover），以及弹窗本身（box）。这三个部分通过id属性被CSS和...
// 当点击按钮时触发遮罩层 $('#myButton').click(function() { $.blockUI({ message: '请稍候...</h3>', // 遮罩层显示的内容 css: { border: 'none', padding: '15px', backgroundColor: '#000', // ...
这个过程可以通过JavaScript的jQuery框架实现，配合CSS进行样式设计，达到点击按钮后遮罩全屏并弹出客服窗口的效果。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻量级、高性能的JavaScript库，它简化了...
在实现遮罩效果时，如果涉及到与百度广告管家的结合，可能需要考虑如何在广告展示时添加遮罩，以防止用户在广告加载过程中进行其他操作。例如，可以监听广告加载事件，当广告加载完成后显示遮罩层，广告关闭时则移除...
用户点击按钮后，页面中会展示一个半透明的遮罩层，并且遮罩层上包含一些提示性内容。这样的实现方式在用户界面设计中非常常见，既美观又能很好地与用户交互。在实际开发过程中，我们可能还需要处理更多的交互细节，...
"jQuery CSS3手机端点击遮罩弹出分享按钮代码"是一个解决方案，它利用了JavaScript库jQuery和CSS3的强大功能，为手机用户创建了一个交互式的分享体验。在这个场景中，当用户点击屏幕上的遮罩层时，会弹出一个包含...
例如，当用户触发某个事件（如点击按钮）时，可以使用JavaScript添加遮罩层到DOM，并显示弹出窗口： ```javascript document.getElementById('yourButton').addEventListener('click', function() { var mask = ...