css分层,实现遮罩底层弹出新窗口里可以操作,最下层能看到单不能操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div style="background-color: #00A770;height: 5000px">123</div>
<div style="background-color: black;z-index: 9;position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;
"></div>

<div style="background-color: white;height: 200px;width:400px;z-index: 10;
position: fixed;top: 50%;left: 50%;margin-top: -100px;margin-left: -200px">
    <input type="text">
    <input type="text">

</div>

</body>
</html>

注意:opacity 设置透明度0.5

  z-index    层级顺序  

效果如下图

原文地址:https://www.cnblogs.com/topzhao/p/9166468.html

时间: 2024-10-25 06:46:02

css分层,实现遮罩底层弹出新窗口里可以操作,最下层能看到单不能操作的相关文章

window.open浏览器弹出新窗口被拦截—原因分析和解决方案

最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,在本机实验没问题,到了服务器就被拦截了,火狐有拦截提示,360浏览器拦截提示都没有,虽然在自己的环境可以对页面进行放行,但是对用户来说,不能要求用户都来通过拦截.何况当出现拦截时,很多小白根本不知道发生了啥,不知道在哪里看被拦截的页面,百思不得其解,后来查了一下,各家浏览器支持的不一样. 另外,可以发现,当window.open为用户触发事件内部或者加载时,不会被拦截,一旦将弹出代码移动到ajax或者一段异步代码内部,马上就出

jsp弹出新窗口代码

1.最基本的弹出窗口代码其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.open (page.html); --> </SCRIPT> 因为这是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间. <!--  -->是对一些版本低的浏览器起作用,在这些老

js弹出新窗口的6中方法

注: //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>"); this.Response.Write("{top.opener =null;top.close();}

解决以showModalDialog打开的页面在提交表单时弹出新窗口的问题

源代码如下: 父页面: window.showModalDialog("../readfile/readFile.jsp","","dialogWidth=1000px;dialogHeight=500px;status=no;help=no;resizable:yes"); 子页面:readFile.jsp 1.在head标签内加入<base target="_self">. <!-- 设置base tar

js如何弹出新窗口

js如何弹出新窗口 时间:2012-4-22 弹出新窗口也是在网页设计中会经常用到的,其用法也很简单,是通过调用javascript的内置函数windows.open来产生的.  window.open函数的基本格式为:  window.open([url],[name],[features],[replace])通常用以的方法有两种: 1.带一个参数的用法  先来看看下面的实例function openwindow(){  window.open("http://www.djjwz.com&q

TWebBrowser控件彻底防止弹出新窗口

最近在编写一个使用到TWebBrowser控件的软件,浏览网页时经常会弹出各种各样的窗口,尤其是广告,让人烦不胜烦,参考网上的一些资料,针对不同的弹窗方式采取相应的措施就能禁止各种弹窗. 1. 将TWebBrowser控件的Silent属性设置为True可以防止弹出“语法错误”的窗口. 2. 编写TWebBrowser控件的OnNewWindow2事件响应代码可以阻止<a href='url' target='_blank'>方式的新窗口 procedure TForm1.WebBrowser

Unity与JavaScript交互——本网页弹出新窗口

赶项目遇到个需求需要在网页打开一个网页的应用因为不想在Unity场景中在编辑,所以产生了这么奇怪的需求 参考网页:http://www.studyofnet.com/news/27.html http://www.java123.net/v/959099.html http://www.java123.net/v/892812.html http://blog.csdn.net/riconyi/article/details/5540557 http://www.jb51.net/article

WebView点击加载的页面中的按钮时不弹出新窗口以及在加载后执行javascript

mWebView.setWebViewClient(new WebViewClient() { //点击网页中按钮时,在原页面打开 public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } //页面加载完成后执行 @Override public void onPageFinished(WebView view, String url) { super

Selenium弹出新页面无法定位元素问题(Unable to locate element)--多窗口切换

最近学习到多窗口切换,在页面操作过程中有时点击某个链接会弹出新的窗口,这时需要先切换到新窗口才能对其进行操作.Webdriver提供了switch_to.window( ) 方法实现在不同窗口中切换. 查阅相关资料,得到两种方法来定位到当前页面: 方法一: browser.switch_to_window(browser.window_handles[1]) 方法二:直接定位当前最新弹出的窗口 for handle in browser.window_handles:#方法二,始终获得当前最后的