【JavaScript】弹出窗体背景变灰变为只读

最新推荐文章于 2021-01-15 13:04:13 发布
最新推荐文章于 2021-01-15 13:04:13 发布
阅读量1.2k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript div button input filter border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaoboyy/article/details/3352623
版权
 
  1. <html>    
  2. <head>    
  3. <title> </title>    
  4. <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312"   />    
  5. <style   type="text/css">    
  6. *{margin:0;padding:0;}    
  7. </style>    
  8. </head>    
  9.   
  10. <body>      
  11.     <input   type="button"   value="点击这里"   οnclick="sAlert('测试效果 <br/> 嗯！效果还不错！ ');"   />    
  12.   
  13. <script   type="text/javascript"   language="javascript">    
  14. function   sAlert(str){    
  15.     var   msgw,msgh,bordercolor;    
  16.     msgw=400;//提示窗口的宽度    
  17.     msgh=100;//提示窗口的高度    
  18.     titleheight=25   //提示窗口标题高度    
  19.     bordercolor="#336699";//提示窗口的边框颜色    
  20.     titlecolor="#99CCFF";//提示窗口的标题颜色    
  21.   
  22.     var   sWidth,sHeight;    
  23.     sWidth=document.body.offsetWidth;//浏览器工作区域内页面宽度    
  24.     sHeight=screen.height;//屏幕高度（垂直分辨率）    
  25.   
  26.   
  27.   
  28.     //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）    
  29.     var   bgObj=document.createElement("div");//创建一个div对象（背景层）    
  30.        
  31.     //定义div属性，即相当于    
  32.     // <div   id="bgDiv"   style="position:absolute;   top:0;   background-color:#777;   filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);   opacity:0.6;   left:0;   width:918px;   height:768px;   z-index:10000;"> </div>    
  33.     bgObj.setAttribute("id","bgDiv");   
  34.     //alert("***********")   
  35.     bgObj.style.position="absolute";    
  36.     bgObj.style.top="0";    
  37.     bgObj.style.background="#777";    
  38.     bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";    
  39.     bgObj.style.opacity="0.6";    
  40.     bgObj.style.left="0";    
  41.     bgObj.style.width=sWidth   +  "px";    
  42.     bgObj.style.height=sHeight   +  "px";    
  43.     bgObj.style.zIndex   =  "10000";    
  44.     document.body.appendChild(bgObj);//在body内添加该div对象    
  45.   
  46.   
  47.   
  48.     var   msgObj=document.createElement("div")//创建一个div对象（提示框层）    
  49.     //定义div属性，即相当于    
  50.     // <div   id="msgDiv"   align="center"   style="background-color:white;   border:1px   solid   #336699;   position:absolute;   left:50%;   top:50%;   font:12px/1.6em   Verdana,Geneva,Arial,Helvetica,sans-serif;   margin-left:-225px;   margin-top:npx;   width:400px;   height:100px;   text-align:center;   line-height:25px;   z-index:100001;"> </div>    
  51.     msgObj.setAttribute("id","msgDiv");    
  52.     msgObj.setAttribute("align","center");    
  53.     msgObj.style.background="white";    
  54.     msgObj.style.border="1px   solid  "   +   bordercolor;    
  55.     msgObj.style.position   =  "absolute";    
  56.     msgObj.style.left   =  "50%";    
  57.     msgObj.style.top   =  "50%";    
  58.     msgObj.style.font="12px/1.6em   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif";    
  59.     msgObj.style.marginLeft   =  "-225px"   ;    
  60.     msgObj.style.marginTop   =   -75+document.documentElement.scrollTop+"px";    
  61.     msgObj.style.width   =   msgw   +  "px";    
  62.     msgObj.style.height   =msgh   +  "px";    
  63.     msgObj.style.textAlign   =  "center";    
  64.     msgObj.style.lineHeight   ="25px";    
  65.     msgObj.style.zIndex   =  "10001";    
  66.     //alert("***********")   
  67.     var   title=document.createElement("h4");//创建一个h4对象（提示框标题栏）    
  68.     //定义h4的属性，即相当于    
  69.     // <h4   id="msgTitle"   align="right"   style="margin:0;   padding:3px;   background-color:#336699;   filter:progid:DXImageTransform.Microsoft.Alpha(startX=20,   startY=20,   finishX=100,   finishY=100,style=1,opacity=75,finishOpacity=100);   opacity:0.75;   border:1px   solid   #336699;   height:18px;   font:12px   Verdana,Geneva,Arial,Helvetica,sans-serif;   color:white;   cursor:pointer;"   οnclick=""> 关闭 </h4>    
  70.     title.setAttribute("id","msgTitle");    
  71.     title.setAttribute("align","right");    
  72.     title.style.margin="0";    
  73.     title.style.padding="3px";    
  74.     title.style.background=bordercolor;    
  75.     title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20,   startY=20,   finishX=100,   finishY=100,style=1,opacity=75,finishOpacity=100);";    
  76.     title.style.opacity="0.75";    
  77.     title.style.border="1px   solid  "   +   bordercolor;    
  78.     title.style.height="18px";    
  79.     title.style.font="12px   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif";    
  80.     title.style.color="white";    
  81.     title.style.cursor="pointer";    
  82.     title.innerHTML="关闭";    
  83.     title.οnclick=removeObj;    
  84.   
  85.     var   button=document.createElement("input");//创建一个input对象（提示框按钮）    
  86.     //定义input的属性，即相当于    
  87.     // <input   type="button"   align="center"   style="width:100px;   align:center;   margin-left:250px;   margin-bottom:10px;"   value="关闭">    
  88.     button.setAttribute("type","button");    
  89.     button.setAttribute("value","关闭");    
  90.     button.style.width="60px";    
  91.     button.style.align="center";    
  92.     button.style.marginLeft="250px";    
  93.     button.style.marginBottom="10px";    
  94.     button.style.background=bordercolor;    
  95.     button.style.border="1px   solid  "+   bordercolor;    
  96.     button.style.color="white";    
  97.     button.οnclick=removeObj;    
  98.        
  99.     function   removeObj(){//点击标题栏触发的事件    
  100.         document.body.removeChild(bgObj);//删除背景层Div    
  101.         document.getElementById("msgDiv").removeChild(title);//删除提示框的标题栏    
  102.         document.body.removeChild(msgObj);//删除提示框层    
  103.     }    
  104.     document.body.appendChild(msgObj);//在body内添加提示框div对象msgObj    
  105.     document.getElementById("msgDiv").appendChild(title);//在提示框div中添加标题栏对象title    
  106.   
  107.     var   txt=document.createElement("p");//创建一个p对象（提示框提示信息）    
  108.     //定义p的属性，即相当于    
  109.     // <p   style="margin:1em   0;"   id="msgTxt"> 测试效果 </p>    
  110.     txt.style.margin="1em   0"    
  111.     txt.setAttribute("id","msgTxt");    
  112.     txt.innerHTML=str;//来源于函数调用时的参数值    
  113.     document.getElementById("msgDiv").appendChild(txt);//在提示框div中添加提示信息对象txt    
  114.     document.getElementById("msgDiv").appendChild(button);//在提示框div中添加按钮对象button    
  115.   
  116. }    
  117. </script>    
  118. </body>    
  119. </html>   
shaoboyy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 弹出窗口，底层画面置灰且不能操作
weixin_44084713的博客
02-20 1909
方法一： 转载地址 <html> <head> <title>弹出一个窗口后，后面的层不可操作</title> <script> function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style.display="block"; //显示隐藏层 hidebg.style.height=document.body.c
jQuery设置页面元素不可点击，不可编辑，只读
m0_52613676的博客
11-30 755
$("input").attr('readonly', true); $("textarea").attr('readonly', true); $(':radio').attr('disabled', true); $(':checkbox').attr('disabled', true); $(':button').attr('disabled', true); $('a').removeAttr('onclick'); $('select').attr('disabled', true); 另外，对
javascripot div登陆提示框(页面层不可用)
boigel的专栏
08-01 558
html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>greencss.comtitle>script type="text/javascript">function sAlert(str,stitle){var msgw,msgh,bordercol
js实现弹出窗口、页面变成灰色并不可操作的例子分享
ant1024
11-19 6699
弹出一个窗口后，后面的层不可操作 function show()  //显示隐藏层和弹出层 {    var hideobj=document.getElementById("hidebg");    hidebg.style.display="block";  //显示隐藏层    hidebg.style.height=document.body.clientHeig
JavaScript 点击页面上的按纽，弹出层，背景变灰
10-29
点击页面上的按纽，弹出一个层，背景变灰，这样的效果现在网页应用的比较多，这里只是个简单的实现方式
利用javaScript实现点击输入框弹出窗体选择信息
10-26
主要是对利用javaScript实现点击输入框弹出窗体选择信息进的实例行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
javascript实现的弹出层背景置灰-模拟(easyui dialog)
10-26
本文为大家介绍下使用javascript实现的弹出层背景置灰-模拟(easyui dialog) 具体实现如下，感兴趣的朋友可以参考下
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
10-24
在JavaScript编程中，实现点击按钮弹出一个可关闭层窗口并使网页背景变灰的效果，是一种常见的用户交互设计，常用于提示信息、确认操作或显示模态对话框。以下是实现这一功能的关键知识点： 1. **JavaScript事件...
JavaScript 弹出窗体点击按钮返回选择数据的实现
10-29
JavaScript中的弹出窗体通常用于实现用户交互，例如选择数据、确认操作或输入信息。在这个例子中，我们探讨的是如何通过JavaScript的`window.showModalDialog()`函数创建一个模态对话框，让用户在子窗口中进行选择，...
把整个页面中的内容设置成只读，不可编辑，只需要一段代码
热门推荐
白小纯的博客
10-16 1万+
只需要遍历所有表单元素将其disabled，这个用jquery就搞定了  Jquery写法 &lt;script type="text/javascript&gt; $(function(){ $("input").attr("disabled",true); }); &lt;/script&gt; 原生javascript写法 document.getElemen...
前端页面设置只读属性组件
yan_dk的专栏
01-28 2706
功能描述            前端页面中，有时需要页面某些元素，或者整个页面只读显示，如果用js代码逐个来实现，代码量非常多，我们可以用通用的代码来解决。 组件介绍 1.引入jquery组件 /plugins/jquery/jquery-1.7.2.min.js"> 2.只读方法的js代码如下： //设置页面中相应标记参数下的所有控
oracle删sequ_Oracle序列（sequence）的创建、使用、修改、删除
weixin_36168447的博客
01-15 378
序列是数据库对象一种。多个用户可以通过序列生成连续的数字以此来实现主键字段的自动、唯一增长，并且一个序列可为多列、多表同时使用。创建语法：CREATE SEQUENCE sequence_name --sequence_name 序列名称[START WITH num] --从某一个整数开始，升序默认值是1，降序默认值是-1。[INCREMENT BY...
JavaScript实现点击按钮弹出窗体并灰化原网页的方法
在描述中，我们可以看到，这个示例是关于使用 JavaScript 实现点击按钮弹出窗体的功能，并且改变原网页的背景颜色。这个描述告诉我们，我们需要使用 JavaScript 来实现这个功能，而不是使用其他编程语言。 标签解释...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值