使用层弹出对话框

最新推荐文章于 2024-07-15 17:15:41 发布
最新推荐文章于 2024-07-15 17:15:41 发布
阅读量392 收藏
点赞数
分类专栏： javascript 文章标签： javascript border
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
  5. </head>
  6. <body>
  7. <a href="javascript:showBox();">忘记了密码？</a>
  8. <div id="box" style="display:none;height:auto !important; height:150px; min-height:150px; width:320px; top:100px; left:150px; position:absolute;FILTER: alpha(opacity=0); opacity:0;border:1px #CCCCCC solid; padding:10px; text-align:left; line-height:24px; background-color:#FAFCFD; z-index:999; ">
  9. <table width="100%" border="0" cellspacing="0" cellpadding="5">
  10.   <tr>
  11.     <td align="right"><a href="javascript:GradientClose();">[关闭]</a></td>
  12.   </tr>
  13.   <tr>
  14.     <td>若您忘记密码，职业帆的客服人员可以帮您找回密码！</td>
  15.   </tr>
  16.   <tr>
  17.     <td>客服人员的联系方式：</td>
  18.   </tr>
  19.   <tr>
  20.     <td>1．<img src="image/mail.gif" width="15" height="11" align="absmiddle" /> 电子邮箱：vsail@oafar.com</td>
  21.   </tr>
  22.   <tr>
  23.     <td>   请在邮件中注明您的会员名，会员类型，以及联系方式。</td>
  24.   </tr>
  25.   <tr>
  26.     <td>2．<img src="image/telepone.gif" width="16" height="16" align="absmiddle" /> 电　　话：0571-28931325</td>
  27.   </tr>
  28. </table>
  29. </div>
  30. <SCRIPT language=javascript>
  31. var intDelay=50; //设置显示速度，越大越慢
  32. var intInterval=10; 
  33. var box = document.getElementById("box");
  34. var isIE = /msie/.test(navigator.userAgent.toLowerCase());
  35. function showBox(){
  36. if(isIE)
  37. box.filters.alpha.opacity=0; 
  38. else
  39. box.style.opacity=0;
  40. box.style.display="block"; 
  41. GradientShow();
  42. } 
  43. function GradientShow() 
  44. { 
  45. if(isIE){
  46. box.filters.alpha.opacity+=intInterval; 
  47. if (box.filters.alpha.opacity<100) 
  48. setTimeout(GradientShow,intDelay);  
  49. }else{
  50. box.style.opacity=parseFloat(intInterval/100)+parseFloat(box.style.opacity);
  51. if (box.style.opacity<1)
  52. setTimeout(GradientShow,intDelay);
  53. }
  54. }
  55. function GradientClose() 
  56. { 
  57. if(isIE){
  58. box.filters.alpha.opacity-=intInterval; 
  59. if (box.filters.alpha.opacity>0)
  60. setTimeout(GradientClose,intDelay); 
  61. else 
  62. box.style.display="none";
  63. }else{
  64. box.style.opacity=parseFloat(box.style.opacity)-parseFloat(intInterval/100);
  65. if (box.style.opacity>0)
  66. setTimeout(GradientClose,intDelay); 
  67. else 
  68. box.style.display="none";
  69. }
  70. }
  71. </SCRIPT>
  72. </body>
  73. </html>
sanfido
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android入门第33天-Android里的弹出式对话框
lifetragedy的专栏
11-24 2170
Android Studio里在4.0前有一种ProgressDialog，这个已经淘汰了。我们完全可以使用ProgressBar来取代。但是还有一种Dialog叫PopWindow，它是一种“可阻塞式Dialog”。即弹出后除非你给它一个“动作”否则就一直显示在那。今天我们就来看看这种Dialog的使用
selenium弹出框相关操作(获取,点击)
weixin_34127717的博客
06-05 419
https://blog.csdn.net/weixin_40049311/article/details/80197880 转载于:https://www.cnblogs.com/person008/p/10980216.html
django弹出对话框_Django模式弹出对话框实现
weixin_39612540的博客
02-01 2490
前言有时候我们希望在不离开主页或者索引页的情况下显示所有需要的用户信息，换句话说，就是让form表单显示在一个新层layer上，在一个弹出的模态窗口modal window里。要在一个模态窗口渲染表单非常容易，只需要使用ajax请求并且将返回结果显示在你的模态窗口上即可。但是有的时候如果我们想继续操作这个表单就比较棘手了，尤其是出错的时候。通常情况下，django会重定向用户到一个显示出错的表单，...
JQ实现点击弹出对话框
乐逍遥
08-15 4037
本文实例为大家分享了jq实现界面点击按钮 弹出悬浮框的具体代码，供大家参考，一个是背景，一个是悬浮窗。
微信小程序-弹出对话框
2401_84901866的博客
05-17 1124
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
django弹出对话框_Django实现简单网页弹出警告代码
weixin_39688170的博客
12-21 882
CSS的全称是什么，汉语意思是什么英文全称：Cascading Style Sheets 汉语意思：层叠样式表 详细描述：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。django删除数据时怎么设置提示是否确认删除可以重写admin的方法 去阻止相应的保存 删除 ...
Android：弹出对话框方式梳理一览（一）
Tai_Monster的博客
05-06 1171
到之前为止其实都是Dialog的很基础的应用，实际上在使用过程中我们可能需要弹出一个Dialog来展示我们自己的定制化的内容，比如说一个登录页面，这个时候我们就不能用之前的简单的方法了，取而代之，我们可以调用setView方法来为我们的Dialog填充自定义的内容，这个过程实际上类似于动态添加View的过程。
django弹出对话框_Django：popup弹出框简单应用实例
weixin_39953356的博客
12-21 462
效果：在p1.html页面点击，弹出p2的弹出框，填写数据，在popup_response页面处理数据1、url设置urlpatterns = patterns(url(r'^p1.html',views.p1),url(r'^p2.html', views.p2),)2、视图函数：views.pyfrom django.shortcuts import renderdef p1(request...
django弹出对话框_django 应用模态框
weixin_39631350的博客
02-01 640
在django 模板页面，如果想要进行点击弹出模态框，单独对模态框进行编辑，需要做一下操作1. 做一个 标签链接href="/add_modal">添加模态框2. 编辑模态框对话框标题3. 在django url 进行跳转，其中 views 处理跳转的url , return render(request,"modal.html")4. 在当前app 的template 创建modal.ht...
php 密码错误就弹出框_PHP弹出对话框
weixin_33778479的博客
03-09 564
本篇文章主要介绍PHP弹出对话框，感兴趣的朋友参考下，希望对大家有所帮助。1. PHP弹出对话框< ?PHPecho "< script language=\"JavaScript\">alert(\"你好\");< /script>";?>//或者< ?PHPprint "< script language=\"JavaScript\">al...
Cocos2d-x中实现弹出对话框示例
09-04
总之，Cocos2d-x中实现弹出对话框的关键在于创建一个新的层（`CCLayer`子类），并在其中添加背景、按钮等元素，同时处理触摸事件以实现交互。通过这样的方式，我们可以灵活地在游戏或应用中插入各种对话框，满足不同...
jQuery Dialog 弹出层对话框插件
10-28
jQuery Dialog 是一个自定义的弹出层对话框插件，开发者因为找不到满足需求的现有解决方案，于是决定自行创建，同时也借此机会学习jQuery插件的开发。这个插件的核心原理是利用JavaScript动态创建一个div元素作为...
dialog手机端弹出对话框确认特效
06-24
"dialog手机端弹出对话框确认特效"就是这样一个关键元素，它提供了一种在手机屏幕上优雅地展示信息并获取用户反馈的方式。对话框通常用于请求用户的确认、提供警示信息或者在执行重要操作前收集必要的输入。 首先，...
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
10-26
最后，`<div class="dialog">` 定义了弹出对话框的样式，包括标题、内容和底部的操作按钮。 CSS部分是关键，因为它定义了对话框的外观和位置。`delete.css` 文件中的样式设置确保了对话框具有适当的边框、背景色、...
漂亮的网页弹出对话框
10-14
可能包含了丰富的弹出对话框样式和动画效果，以及易于使用的API供开发者调用。使用这类库，开发者可以节省大量时间，专注于对话框的内容和交互设计。 总之，"漂亮的网页弹出对话框"是一个涵盖HTML、CSS、JavaScript...
【JavaScript 报错】未捕获的URI错误：Uncaught URIError
Allen-
07-11 668
Uncaught URIError 是JavaScript中常见的一种错误，通常发生在全局URI处理函数（如 decodeURIComponent、encodeURIComponent）使用不当时。本文将详细介绍 Uncaught URIError 错误的常见原因及其解决方案。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 389
原生WebSocket： new WebSocket。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
最新发布
qq_37752382的博客
07-15 298
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 268
解决页面放大，图片模糊的问题
vue弹出对话框
05-31
Vue中弹出对话框可以使用第三方组件库如Element UI或者自己手动实现。以下是一个手动实现的示例： 1. 在需要弹出对话框的组件中，添加一个按钮并绑定一个方法： ``` <template> <div> <button @click="showDialog">弹出对话框</button> <div v-if="dialogVisible"> <!-- 对话框内容 --> </div> </div> </template> <script> export default { data() { return { dialogVisible: false } }, methods: { showDialog() { this.dialogVisible = true; } } } </script> ``` 2. 在data中添加一个变量dialogVisible，用于控制对话框的显示与隐藏。 3. 在showDialog方法中将dialogVisible设置为true，即可显示对话框。 4. 在对话框中添加内容，可以使用第三方组件库如Element UI的Dialog组件，也可以手动实现。 5. 对于手动实现对话框，可以在对话框中添加一个遮罩层，并使用CSS实现弹出效果： ``` <template> <div> <button @click="showDialog">弹出对话框</button> <div v-if="dialogVisible" class="dialog-wrapper"> <div class="dialog-mask"></div> <div class="dialog-content"> <!-- 对话框内容 --> </div> </div> </div> </template> <style> .dialog-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } .dialog-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); } .dialog-content { background-color: #fff; width: 400px; height: 300px; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } </style> ``` 这样就实现了一个简单的手动弹出对话框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值