`
yxgblog
  • 浏览: 38406 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
最近访客 更多访客>>
社区版块
存档分类
最新评论

点击按钮弹出层

阅读更多

<script>
function msg(info){
var p=document.createElement("DIV");
if (!info)
p.id="p";
p.style.position="absolute";
p.style.width=document.body.scrollWidth;
p.style.height=(document.body.offsetHeight>document.body.scrollHeight)?'100%':document.body.scrollHeight;
p.style.zIndex='998';
p.style.top='0px';
p.style.left='0%';
p.style.backgroundColor="#d1d1d1";
p.style.opacity='0.5';
p.style.filter="alpha(opacity=40)";
document.body.appendChild(p);
var p1=document.createElement("DIV");
var top=parseInt(parseInt(document.body.scrollHeight)*0.25)+document.body.scrollTop;
p1.style.position="absolute";
p1.style.width="300px";
p1.id="p1";
var left=Math.ceil(((document.body.scrollWidth)-parseInt(p1.style.width.replace('px','')))/2)+document.body.scrollLeft;
p1.style.height="100px";
p1.style.zIndex='999';
p1.style.top=top+'px';
  p1.style.left=left+'px';
p1.style.border="0px solid #dedede";
var html="";
  html+="<center>"

  html+="<div class='p1' style='overflow:hidden;background:url(image/divbg.jpg) repeat-x; height:25px;width:295px;border-left:1px solid #cccccc;border-right:1px solid #cccccc;color:#333;font-size:12px;font-weight:bold;text-align:left; line-height:25px; padding-left:5px;'> 提示窗口</div>"
html+="<div id='c' style='height:150px;width:300px;background-color:#ffffff;overflow:hidden;border-left:1px solid #cccccc;border-right:1px solid #cccccc;'>"+"<div style='width:200px; margin:10px auto 0 auto; font-size:14px; color:red; line-height:25px; text-align:center;font-family:'宋体';'>恭喜您!提交成功!</div>"+"<div style='width:280px; margin:0 auto; font-size:14px; color:#333333; line-height:25px; text-align:center;'>您的数字编号为:<span style='font-family:Arial, Helvetica, sans-serif; color:#0970d0;  font-size:16px; font-weight:bold;'>2536 2505 6987</span></div>"+"<div style='font-size:12px; color:#ff0000; width:280px;margin:0 auto; line-height:25px;font-family:'宋体';'>友情提示:凭编码可以换取打折门票。</div>"+"<br><br><br>[ <a href='javascript:this.cancle()'>关闭</a> ]</div>"
 html+="<div class='p1' style='height:1px;overflow:hidden;background:#ffffff;width:298px;border-left:1px solid #cccccc;border-right:1px solid #cccccc;'></div>"

  html+="</center>"
document.body.appendChild(p1);
p1.innerHTML=html;
var arr=document.getElementsByTagName("select");
var i=0;
while(i<arr.length){
  arr[i].style.visibility='hidden';
  i++;
}
this.cancle=function(){
document.body.removeChild(document.getElementById('p'));
document.body.removeChild(document.getElementById('p1'));
var arr=document.getElementsByTagName("select");
  var i=0;
  while(i<arr.length){
  arr[i].style.visibility='visible';
  i++;
  }
}
}
</script>


 <a href="#" onfocus="this.blur()"><img src="image/tj_btn.jpg" width="79" class="ptd" onClick='msg()' /> </a>

分享到:
评论

相关推荐

    鼠标点击按钮弹出层可以写from表单登陆框弹出层

    在网页设计和开发中,"鼠标点击按钮弹出层可以写from表单登陆框弹出层"是一个常见的交互设计模式,用于提供用户友好的登录体验。这种设计允许用户在不离开当前页面的情况下进行身份验证,增加了用户体验的流畅性。...

    jQuery点击按钮弹出层可拖动代码

    &lt;title&gt;jQuery点击按钮弹出层 打开弹出层 &lt;!-- 弹出层内容 --&gt; &lt;script src="https://code.jquery.com/jquery-3.x.y.min.js"&gt;&lt;/script&gt; &lt;script src="js/main.js"&gt;&lt;/script&gt; ``` 2. **CSS样式**: ...

    jQuery点击按钮弹出层可拖动代码.zip

    《jQuery点击按钮弹出层可拖动代码》 在网页开发中,用户交互性是提升用户体验的关键因素之一。jQuery库以其简洁的API和强大的功能,成为实现这些交互效果的首选工具。本压缩包中的资源,"jQuery点击按钮弹出层可...

    jquery点击按钮弹出层可放大居中关闭对话框代码

    在这个场景中,"jquery点击按钮弹出层可放大居中关闭对话框代码"涉及到的是使用jQuery实现的一种用户交互功能,即当用户点击按钮时,弹出一个对话框,该对话框可以被放大、居中显示,并且具备关闭功能。 首先,让...

    js 点击按钮弹出层

    代码非常简单,点击按钮能弹出一个遮罩层,如有不足,请继续补充

    原生js代码点击文字或小图弹出层_点按钮关闭弹出层特效

    弹出层通常是一个包含在页面上的隐藏元素,如一个div,当用户触发某个事件(如点击按钮或文字)时,该元素会通过改变CSS样式(如display属性)来显示。关闭弹出层则可以通过添加一个关闭按钮,并监听其点击事件,将...

    基于layui点击按钮弹出包含表单的窗口

    本篇文章将详细介绍如何利用layui实现“基于layui点击按钮弹出包含表单的窗口”的功能。 首先,我们需要理解layui的模块化概念。layui的每个功能都被封装为一个模块,例如`form`模块用于处理表单操作,`layer`模块...

    jQuery网页弹出层分享按钮插件

    该插件的核心功能是创建弹出层,当用户点击某个触发元素(如按钮或链接)时,弹出层会显示分享选项。这种设计使得分享功能不会干扰用户的主要浏览体验,同时又能吸引他们进行分享。弹出层通常包含一系列社交媒体图标...

    html5手机端点击弹出层

    弹出层(通常称为弹窗或模态框)是在网页上创建的一个半透明或者全屏覆盖的独立区域,当用户触发特定事件(如点击按钮)时,这个区域会突然出现,吸引用户的注意力。在移动设备上,弹出层的设计需要考虑到屏幕大小和...

    js弹出层特效点击按钮弹出窗口支持鼠标拖动

    "js弹出层特效点击按钮弹出窗口支持鼠标拖动"这个主题,关注的是如何创建一个具有动态效果的弹出层,它不仅可以在用户点击按钮时出现,还允许用户通过鼠标拖动来调整弹出层的位置。 首先,我们需要理解HTML结构。在...

    js制作带有遮罩弹出层实现登录注册表单代码特效

    在这里,它被用来创建一个可交互的登录注册表单,当用户点击特定按钮时,表单会以弹出层的形式出现在页面上。弹出层通常是一个半透明的遮罩覆盖整个页面,中间显示表单内容,这样可以防止用户在填写表单时误触背景...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    这段代码实现的功能是,当用户点击按钮`#showPopup`时,弹出层`#popup`会显示并固定在屏幕相应位置。当用户滚动页面时,弹出层会随着滚动。同时,如果用户点击弹出层外部,弹出层会自动隐藏。 需要注意的是,这只是...

    微信小程序弹出层,右上角关闭按钮

    微信小程序的弹出层设计通常包括一个可点击的按钮来触发弹出,以及在弹出层右上角设置一个关闭按钮,允许用户方便地关闭该层。本篇文章将深入探讨如何实现这一功能,并分享相关的知识点。 首先,我们需要了解微信小...

    js 弹出层特效点击按钮弹出窗口支持鼠标拖动

    在JavaScript编程领域,"弹出层特效点击按钮弹出窗口支持鼠标拖动"是一个常见的交互设计,用于增强用户体验。这个功能通常应用于各种网页应用中,比如提示信息、表单填写、图片预览等场景。本文件提供的就是一个实现...

    网站前端——登录按钮,点击弹出层

    本示例主要关注的是“登录按钮”的实现,特别是点击按钮后出现的弹出层功能。这个功能通常用于用户验证身份,以便访问受保护的内容或进行交互操作。下面我们将深入探讨涉及的技术点。 1. **HTML**: HTML(超文本...

    jQuery点击事件遮罩弹出层可移动特效代码.zip

    "jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果,可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。

    jquery弹出层带关闭按钮

    弹出层通常是指在用户进行特定操作后,如点击按钮或链接,会在页面上弹出一个独立的显示区域,用于显示额外信息或进行交互操作。这种效果可以是模态对话框(Modal Dialog),即阻塞用户与页面其他部分的交互,也可以...

    layer弹出层全屏及关闭方法

    在现代Web开发中,实现弹出层全屏展示以及关闭方法是提升用户交互体验的重要技术之一。layer是一款轻量级的页面弹出层插件,它提供了非常方便的方式来实现弹出层的全屏展示以及关闭操作。以下是layer弹出层全屏及...

    layui 弹出层回调获取弹出层数据的例子

    在这个例子中,我们将详细解析如何在用户点击“确定”按钮时,获取并处理弹出层中的数据。 首先,让我们回顾一下弹出层的初始化代码: ```javascript layer.open({ type: 2, title: '请选择楼栋负责人', maxmin...

    jQuery点击图片弹出层显示文字.zip

    最后,为了提供良好的用户体验,可能还需要添加关闭弹出层的功能,这可以通过在弹出层上添加一个关闭按钮或点击背景层隐藏弹出层来实现。同时,考虑到响应式设计,可能还需要对不同屏幕尺寸进行适配,确保弹出层在...

Global site tag (gtag.js) - Google Analytics