`
xly_971223
  • 浏览: 1277251 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js --- 单击按钮出现对话框代码(透明)

阅读更多
 <script>
  function msg(info){
  var p=document.createElement("DIV");
  if (!info) var 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="gray";
  p.style.opacity='0.5';
  p.style.filter="alpha(opacity=80)";
  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="200px";
  p1.style.zIndex='999';  
  p1.style.top=top+'px';
  p1.style.left=left+'px';
  p1.style.border="0px solid red";
  var html="";
  html+="<center>"
  html+="<div class='p3' style='height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red;'></div>"
  html+="<div class='p2' style='height:1px;overflow:hidden;background:red;width:296px;border-left:1px solid red;border-right:1px solid red;'></div>"
  html+="<div class='p2' style='height:1px;overflow:hidden;background:red;width:298px;border-left:1px solid red;border-right:1px solid red;'></div>"
  html+="<div class='p1' style='height:20px;overflow:hidden;background:red;width:300px;border-left:1px solid red;border-right:1px solid red;color:#fff;font-size:9pt;font-weight:bold;text-align:left;'> ⊙ 提示</div>"
  html+="<div id='c' style='height:150px;width:300px;background-color:#FEEACB;overflow:hidden;border-left:1px solid red;border-right:1px solid red;padding-top:40px;font-size:9pt;'>"+info+"<br><br><br>[ <a href='javascript:this.cancle()'>关闭</a> ]</div>"
  html+="<div class='p1' style='height:1px;overflow:hidden;background:#FEEACB;width:298px;border-left:1px solid red;border-right:1px solid red;'></div>"
  html+="<div class='p2' style='height:1px;overflow:hidden;background:#FEEACB;width:296px;border-left:1px solid red;border-right:1px solid red;'></div>"
  html+="<div class='p3' style='height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red'></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>
  <input value='shout Down' type='button' onClick='msg()' />
分享到:
评论
1 楼 sech 2009-03-12  
呵呵
好东西
顶了...

相关推荐

    javascript-hello-world:单击一个按钮时显示“ Hello World”消息的示例JavaScript

    单击该按钮时出现的消息。脚步创建一个新HTML文件,并将其命名为hello-world.html。 添加以下HTML: &lt; ! doctype html &gt;&lt; html &gt;&lt; head &gt; &lt; title &gt; JavaScript Hello World! &lt; / title &gt;&...

    jQuery实现单击按钮遮罩弹出对话框效果(1)

    #### jQuery实现单击按钮遮罩弹出对话框原理 在本教程中,我们学习了如何通过jQuery来实现一个单击按钮后,弹出一个带有遮罩层的对话框效果。这种效果通常用于在用户交互时提供反馈或者弹出重要信息。 #### 关键...

    jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

    在网页设计中,有时我们需要实现一种交互效果,即当用户点击特定按钮时,会弹出一个对话框,询问用户是否确认执行某项操作,如删除数据或登录等。本篇文章将介绍如何使用jQuery来实现这样的功能,特别是仿照天猫的...

    JS打开图片另存为对话框实现代码

    单击按钮打开图片另存为对话框的示例如下 代码如下:&lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; New Document &lt;/title&gt; &lt;meta name=”...

    js确认删除对话框.rar

    代码说明:单击删除的超链接后将执行delcfm()函数,在对话框中,如果点击“确定”,函数将返回true值,就将页面转到标签中的链接页面执行删除的页面;如果点击“取消”,函数将返回false值,标签将不转到执行删除的...

    jQuery实现单击按钮遮罩弹出对话框效果(2)

    本文实例为大家分享了jQuery实现弹出对话框的具体实现代码,供大家参考,具体内容如下 首先,这里的引用jquery-1.4.4.min.js和jquery.XYTipsWindow.min.2.8.js这两个js,还有一个jquery.XYTipsWindow.2.8.css话不多...

    javascript打开选择对话框保存对话框.zip

    对于打开选择文件对话框来说,相对比较简单,只需要在页面内放一个file标签,可以将其display设置为none,使用图片、按钮及链接来模拟file的单击事件,从而实现选择文件的任务。 对于打开保存文件对话框可以使用...

    ASP开发实例 窗口及页面设置的一些样式 鼠标单击链接样式 为弹出的窗口加入关闭按钮 日期选择器 弹出全屏显示网页 关闭IE主窗口时,不弹出询问对话框 弹出网页对话框 安徽机电职业技术学院 陈伟

    在本实例中,我们将深入探讨ASP开发中的几个关键知识点,包括窗口和页面的样式设置、鼠标单击链接的样式、添加窗口关闭按钮、日期选择器、全屏显示网页以及关闭IE浏览器时的提示对话框处理。 1. **窗口及页面设置**...

    javascript超链接

    根据给定文件的信息,本文将围绕JavaScript操作Cookie的相关知识点展开,包括如何利用JavaScript进行Cookie的读取、写入和删除。 ### JavaScript与Cookie 在Web开发中,Cookie是一种常用的技术,用于存储用户的...

    element-ui中dialog弹窗关闭按钮失效的解决

    Dialog组件是用于展示弹出式对话框的组件,它可以在当前页面显示内容,支持自定义内容和关闭按钮。在正常情况下,Dialog可以通过点击关闭按钮或者操作布尔型的数据模型来控制其显示和隐藏。例如: ```html &lt;el-...

    多种方式单击出现遮罩层代码

    jQuery弹出层对话框代码基于jquery-3.3.1.min.js制作,有基础对话框、全屏对话框、可拖动对话框、暗黑模式对话框、设置宽度、隐藏按钮、设置按钮文字、按钮事件、自动关闭、嵌套iframe、内容背景色、隐藏遮罩层等...

    JavaScript-JavaScript语法集锦

    ### JavaScript 语法集锦知识点详解 #### 一、概述 JavaScript 是一种广泛应用于网页开发的脚本语言,它能够使网页具有动态交互功能。本文档将详细介绍一系列常用的 JavaScript 语法和方法,帮助开发者更好地理解和...

    noty:无需依赖项的通知库,可以轻松创建警报-成功-错误-警告-信息-确认消息,作为标准警报对话框的替代方案

    无依赖通知库。... 2个关闭选项:单击,按钮 API和回调 自定义模板 文档可见性控制(模糊,焦点) 文献资料 文档和示例在这里: : 基本用法 import Noty from "noty" ; new Noty ( { text : "No

    bookmark.js 汉化版

    此js代码为汉化版,更易懂。...在左侧单击“Javascript”项,在右侧勾选“启用Acrobat TavaScript(J)”、“启用菜单项目JavaScript执行权限(M)”和“启用全局对象安全性策略”三项,单击“确定”按钮。

    sciter-dialogs:Sciter js 模态对话框

    帮助按钮打开外部链接 可使用回调翻译 演示 git clone 仓库 运行install.bat下载最新的 sciter 二进制文件和 sciter 包管理器 安装包php spm.phar install 更新到fontawesome路径../vendor/8ctopus/sciter-font...

    JavaScript上机实验题

    - 单击“修改年龄”按钮时,弹出对话框让用户输入新的年龄。 - 使用 `prompt` 函数接收用户输入,并更新页面上的年龄信息。 - 若用户点击“取消”,则提示相应信息。 2. **学生信息提交**: - 提交学生信息后,...

    asp.net最常用的三十三种编程代码

    这个代码片段展示了如何通过 JavaScript 的 `window.open` 方法在 ASP.NET 中打开一个新的页面,并传递参数。参数通过 URL 查询字符串传递,然后在新页面中通过 `Request.QueryString` 获取。 2. **为按钮添加...

    react-custom-hooks:React.js 中的自定义钩子,在日常代码中很方便

    React.js 中的自定义钩子,在日常代码中很方便 自定义挂钩 - React Hook 来处理计数器,递增和递减 - 用于处理打开和关闭对话框的 React Hook - 使用 Fetch 在加载时调用 apis 的 React Hook - React Hook 使用...

Global site tag (gtag.js) - Google Analytics