实现网页背景变暗，显示信息提示效果!

最新推荐文章于 2021-06-04 09:14:49 发布
最新推荐文章于 2021-06-04 09:14:49 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： HTML & JS 文章标签： function button null string query javascript
< script  language ="javascript" >
var  alternateFrame = null ;
 var  alternateWin = null ;
window.alert = showAlert;
window.confirm = showConfirm;
 function  alternateWindow(){
     this .win = null ;
     this .pBody = null ;
     this .pBg = null ;
     this .type = " open " ;
     this .FocusWhere = " OK " ;
}
 function  showAlert(info){
    alternateWin = new  alternateWindow();
     var  pBody  =  alternateWin.init();
    alternateWin.initAlertBody(pBody,info);
    alternateWin.type = " alert " ;
}
 function  showConfirm(info,ok_func,notok_func,ok_str,not_okstr){
    alternateWin = new  alternateWindow();
     var  pBody  =  alternateWin.init();
    alternateWin.initConfirmBody(pBody,info,ok_func,notok_func,ok_str,not_okstr);
    alternateWin.type = " confirm " ;
}
alternateWindow.prototype.init = function (){
     if (alternateFrame == null ){
        alternateFrame = document.createElement( " <iframe allowTransparency='true' id='popframe' frameborder=0 marginheight=0 src='about:blank' marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe> " )
        alternateFrame.style.position = " absolute " ;
        document.body.appendChild(alternateFrame);
    }
     else {
        alternateFrame.style.visibility = " visible " ;
    }
    alternateFrame.style.width = screen.availWidth;
    alternateFrame.style.height = screen.availHeight;
    alternateFrame.style.left = document.body.scrollLeft;
    alternateFrame.style.top = document.body.scrollTop;
    alternateFrame.name  =  alternateFrame.uniqueID;
     this .win = window.frames[alternateFrame.name];
     this .win.document.write( " <body leftmargin=0 topmargin=0 οncοntextmenu='self.event.returnValue=false'><div id=popbg></div><div id=popbody></div><div></div></body> " );
     this .win.document.body.style.backgroundColor = " transparent " ;
    document.body.style.overflow = " hidden " ;
     this .pBody = this .win.document.body.children[ 1 ];
     this .pBg = this .win.document.body.children[ 0 ];
     this .hideAllSelect();
     this .initBg();
     return   this .pBody;
}
alternateWindow.prototype.initBg = function (){
     with ( this .pBg.style){
        position = " absolute " ;
        left = " 0 " ;
        top = " 0 " ;
        width = " 100% " ;
        height = " 100% " ;
        visibility = " hidden " ;
        backgroundColor = " #333333 " ;
        filter = " blendTrans(duration=1) alpha(opacity=30) " ;
    }
     this .pBg.filters.blendTrans.apply();
     this .pBg.style.visibility = " visible " ;
     this .pBg.filters.blendTrans.play();
}
alternateWindow.prototype.initAlertBody = function (obj,info){
     with (obj.style){
        position = " absolute " ;
        width = " 400 " ;
        height = " 150 " ;
        backgroundColor = " #ffffff " ;
    }
    obj.style.left = window.document.body.clientWidth / 2 - 200 ;
    obj.style.top = window.document.body.clientHeight / 3 ;
     var  str;
    str  = " <table border=0 cellpadding=0 cellspacing=1 bgcolor=#000000 width=100% height=100%><form id='form1' name='form1'><tr height=30> " ;
    str += " <td align=left style='color:#000000;font-size:14px;font-weight:bold' bgcolor=#9999ff>[提示]</td></tr> " ;
    str += " <tr><td align=center bgcolor=#efefff style='font-size:12px;color:#000000;vertical-align: middle;'> " ;
    str += info + " <input type=text id=ttt><input type=text id=rrr><input type=text id=uuu><input type='button' οnclick='alert(this.name);parent.getall();' value='传递文字'></td></tr><tr height=30 bgcolor=#efefef><td align=center> "   +
     " <input type='button' value='确定' id='OK' "   +
     "  οnkeydοwn='parent.alternateWin.onKeyDown(event,this)' " +
     "  οnclick='parent.alternateWin.closeWin()' style='border:solid 1px #666666;background:#cccccc'> "   +
     " </td></tr></form></table> " ;
    obj.innerHTML = str;
     this .win.document.body.all.OK.focus();
     this .FocusWhere = " OK " ;
}
alternateWindow.prototype.onKeyDown = function (event,obj){
     switch (event.keyCode){
         case   9 :
        event.keyCode =- 1 ;
         if ( this .type == " confirm " ){
             if ( this .FocusWhere == " OK " ){
                 this .win.document.body.all.NO.focus();
                 this .FocusWhere = " NO " ;
            }
             else {
                 this .win.document.body.all.OK.focus();
                 this .FocusWhere = " OK " ;
            }
        }
         break ;
         case   13 :obj.click();;
         break ;
         case   27 : this .closeWin();
         break ;
    }
}
alternateWindow.prototype.closeWin = function (){
    alternateFrame.style.visibility = " hidden " ;
     this .showAllSelect();
    document.body.style.overflow = " auto " ;
}
alternateWindow.prototype.hideAllSelect = function (){
     var  obj;
    obj = document.getElementsByTagName( " SELECT " );
     var  i;
     for (i = 0 ;i < obj.length;i ++ )
    obj[i].style.visibility = " hidden " ;
}
alternateWindow.prototype.showAllSelect = function (){
     var  obj;
    obj = document.getElementsByTagName( " SELECT " );
     var  i;
     for (i = 0 ;i < obj.length;i ++ )
    obj[i].style.visibility = " visible " ;
}
 function  formToRequestString(formname){
     var  query_string = '' ;
     var  form_obj  =  window.frames[ 0 ].document.getElementById(formname).elements;
     for  ( var  i = 0 ;i < form_obj.length ;i ++ ){
         var  e = form_obj[i];
         if  (e.id != '' ){
             var  element_value  =   "" ;
             if  (e.type.toLowerCase() == ' select ' ){
                element_value = e.options[e.selectedIndex].value;
            }
             else   if  (e.type.toLowerCase() == ' checkbox '   ||  e.type.toLowerCase() == ' radio ' ){
                 if  (e.checked == false ){
                     continue ;
                }
                element_value = e.value;
            }
             else {
                element_value = e.value;
            }
            query_string += e.name + ' = ' + element_value.replace( / &/ g, " %26 " )  +   ' & ' ;
        }
    }
     return  query_string;
}
 </ script >
< script >
function  getall() {
document.getElementById( " ssss " ).value  =  window.frames[ 0 ].document.getElementById( " ttt " ).value;
}
 </ script >
< input  name =ssss  type =text >
< div  id =naeee >
</ div >
< body >
   < button  onclick ="alert('');" >
    跳出新窗口传值
   </ button >
</ body >
 
xwk
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[原创]asp如何实现图片的动态翻动的效果
scoutlin的专栏
01-18 1036
http://community.csdn.net/Expert/topic/3722/3722373.xml?temp=.6881372rs.open "select top 3 * from table order by id desc",conn,1,1ii=1do while not rs.eof%> id=img>>rs.movenextlooprs.closeset rs=
JS 案例 改变网页背景颜色
suiferq的博客
10-23 3125
改变网页背景颜色 代码片： // An highlighted block <title></title> <script type="text/javascript"> function color(str) { document.body.style.backgroundColor = str; } </script> </head> <body> <input type="button"
网页中弹出小窗口(页面背景直接半透明)
百威
02-27 322
转载：http://hi.baidu.com/javajavajava/blog 不管是做网站还是一些应用系统，都免不了要用到一些弹出的效果，在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了网络上比较流行的仿XP关机效果的弹出功能，按目前的反应来说还是效果不错的，下面将此功能整一下儿，如果有需要大家可以直接使用到自己的网站或是应用系统中去。 　　不在详细的说明代码了，帖出代码之前...
SINA 样式的提示框
Tom Studio (汤姆工作室)
06-11 925
提示信息框a{ color:#000; font-size:12px;text-decoration:none}a:hover{ color:#900; text-decoration:underline}body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#
HTML让一张图片变暗,HTML – 如何使CSS背景图像变暗？
weixin_36228334的博客
06-03 888
我把头发拉过来.我已经尝试了所有我发现的东西,此时我猜我一定是犯了某种错误.我试图使背景图像变暗,使其不那么饱和.这是我的HTML：Bearbeard LogoWorldEretikasCustomTHE HERETIC SWORD而我的CSS：#home {background-image: url(file:///Volumes/Animus/Jon/Dropbox/website/hellc...
文本框获取焦点时改变背景颜色
天道酬勤
11-30 8390
head>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />title>文本框获取焦点时，改变背景颜色title>script type="text/javascript">    function txtFocus() {       var e = window.event;   
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
09-04
在网页设计中，点击弹出层效果和弹出窗口后网页背景变暗是常见的交互设计手法，用于增强用户体验，提供更加聚焦的操作环境。这两种效果通常应用于弹窗对话框、模态框或者信息提示等场景。以下是对实现这些效果的代码...
一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码
09-06
标题中的“一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码”指的是在网页中实现一个跨浏览器的弹出提示窗口，该窗口不仅具有背景变暗的效果，还可以被用户拖动。这个功能在多种浏览器环境下，包括IE、...
jQuery实现点击弹出背景变暗遮罩效果实例代码
10-22
jQuery 实现点击弹出背景变暗遮罩效果是一种常见的网页交互设计，用于创建弹窗、提示框或选择菜单等元素时提供更好的用户体验。这个实例主要涉及了 jQuery 的事件处理、DOM 操作以及 CSS 样式设计，使得在用户点击...
背景变暗弹出层 遮蔽层效果
07-30
CSS可以利用伪类（如`:hover`）和定位（如`position: fixed`）来实现弹出层的显示和隐藏，同时通过调整背景颜色的透明度（如`opacity`）来实现背景变暗。 在实际应用中，开发者可以根据项目需求选择合适的实现方式...
JQuery实现对话框效果 即弹出对话框背景变暗且不可操作
03-04
本文将深入探讨如何使用jQuery实现一个对话框效果，即在弹出对话框时，背景变暗并且用户无法操作背景内容，以提供更好的用户体验。 首先，要实现这种效果，我们需要引入jQuery库到我们的HTML文件中。可以使用CDN...
网页特效-窗口特效-弹出窗口后网页背景变暗的效果
别在熬夜了！
04-07 2843
网页特效-窗口特效-弹出窗口后网页背景变暗的效果 与之间--> .black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opac
html5 图片变暗,HTML – 如何使CSS背景图像变暗？
weixin_31108679的博客
06-04 1096
我把头发拉过来.我已经尝试了所有我发现的东西,此时我猜我一定是犯了某种错误.我试图使背景图像变暗,使其不那么饱和.这是我的HTML：Bearbeard logoWorldEretikasCustomTHE HERETIC SWORD而我的CSS：#home {background-image: url(file:///Volumes/Animus/Jon/DropBox/website/hellc...
uniapp显示提示框背景变暗_APP页面提示样式小总结
weixin_39605647的博客
01-30 581
最近做交互总结，又碰到了页面弹窗提示的问题，于是便总结了下。我按弹窗提示的样式分为了以下几种来进行说明。每种样式的提示强度不同，对用户在使用app时的打扰与影响也不同。这些提示并不是说哪种好哪种不好，按照自己的规范选择合理的就好。以下总结，前三个提示的名称是大家习以为常的，但后面几个的命名是以我个人的经验来命的，不一定很合理，但至少可以说明点问题。Action sheetAction sheet ...
改变网页背景色
qq_45337854的博客
10-11 683
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function color(str){ document.b...
android显示弹窗背景变暗
最新发布
06-07
在 Android 中，可以通过设置 Dialog 或 PopupWindow 的背景来实现弹窗背景变暗的效果。具体实现步骤如下： 1. 创建一个布局文件，用于定义 Dialog 或 PopupWindow 的界面。可以在布局文件中添加一个全屏的半透明背景，用于实现背景变暗的效果。 2. 在代码中创建 Dialog 或 PopupWindow 对象，并将上面创建的布局文件设置为其内容。 3. 为 Dialog 或 PopupWindow 设置背景。可以使用 ColorDrawable、GradientDrawable 或者其他类型的 Drawable 来设置背景。在设置背景时，可以使用半透明的颜色来实现背景变暗的效果。 4. 显示 Dialog 或 PopupWindow。 下面是一个示例代码，用于实现弹窗背景变暗的效果： ```java // 创建一个用于定义弹窗界面的布局文件 View popupView = LayoutInflater.from(context).inflate(R.layout.popup_layout, null); // 创建 PopupWindow 对象 PopupWindow popupWindow = new PopupWindow(popupView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); // 设置背景 ColorDrawable background = new ColorDrawable(Color.parseColor("#80000000")); popupWindow.setBackgroundDrawable(background); // 显示 PopupWindow popupWindow.showAtLocation(parentView, Gravity.CENTER, 0, 0); ``` 在上面的代码中，我们创建了一个 PopupWindow 对象，并将一个布局文件设置为其内容。然后，我们使用 ColorDrawable 来创建一个半透明的背景，并将其设置为 PopupWindow 的背景。最后，我们显示 PopupWindow。这样，当弹窗显示时，背景会变暗，以突出弹窗。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值