点击按钮弹出背景半透明圆角层效果(点击弹出隐藏层)

最新推荐文章于 2020-02-19 13:58:06 发布
最新推荐文章于 2020-02-19 13:58:06 发布
阅读量230 收藏
点赞数
文章标签： xhtml javascript python ViewUI
原文链接：https://my.oschina.net/glelaine/blog/29011
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#left1{width:500px;height:300px;margin:0 auto;border:1px solid #f60;overflow:hidden;padding-top:100px;}
#left2{width:80px;height:80px;background:#f00;cursor:pointer;}
#opo{position:absolute;top:100px;left:200px;z-index:999;width:381px;height:auto;display:none;}
.border_top{width:381px;height:4px;float:left;background:url(images/border-top.jpg) no-repeat;}
.border_bottom{width:381px;height:4px;float:left;background:url(images/border-bottom.jpg) no-repeat;}
.opocont{float:left;width:362px;width:369px\9;height:134px;border:3px solid #e0cb9d;border-top:none;border-bottom:none;padding:25px 0 0 13px;padding:18px 0 0 7px\9;background:#fcf1d8;filter:alpha(opacity=50);
opacity:0.5;/*FF*/_margin-top:-20px;}
.opocont a img{width:80px;height:18px;border:1px solid #cecece;margin-bottom:7px;}
</style>
<script type="text/javascript">
function showDiv(){
document.getElementById('opo').style.display='block';
}
function hiddenDiv(){
document.getElementById('opo').style.display='none';
}
</script>
</head>
<body>
        <div id="left1">
                <a  href="javascript:showDiv()" >点击确认</a>
        </div>
<div id="opo" οnmοuseοver="showDiv();" οnmοuseοut="hiddenDiv();">
                <div class="border_top"></div>
                   <div class="opocont">
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
                                <a href="#"><img src="images/opoimg.jpg" alt="工商银行" /></a>
               </div>
            <div class="border_bottom"></div>
 </div>
</body>
</html>

转载于:https://my.oschina.net/glelaine/blog/29011

weixin_34348174
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
点击按钮，弹出一个可关闭的层窗口，网页背景变灰
06-22
点击按钮，弹出一个可关闭的层窗口，网页背景变灰
背景色渐变与Button点击效果与Button圆角
CASER_HDMI的博客
04-20 589
最近自己搞的Android时，感觉自己做的Android很单调，而且用户体验很差，Button按下去后不知到是否按下了，于是想提升以下用户体验，看了一下现在的软件，别人的按钮都有点击效果，单调的背景也是看起来很烦，于是便上网查了一下怎么改变这些问题，看了一下感觉用法都差不多。 先说一下怎么使背景是渐变色，先在Drawable文件夹下创建一个Drawable resource file 之
JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
bangju6497的博客
07-07 126
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="ke...
点击按钮弹出层效果
chOraNSl的博客
09-12 432
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>弹出层</title> <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui...
Div+CSS始终居中的半透明弹出层
jianghao19890829的专栏
09-24 143
[code="html"] Div+CSS实现始终居中的半透明弹出层 function showDiv(){ document.getElementById('popDiv').style.display='block'; document.getElementById('popIframe').style.display='block'; document....
jquery win 7透明弹出层效果的简单代码
10-27
在本文中，我们将深入探讨如何使用jQuery实现Windows 7风格的透明弹出层效果，以及相关的编程技巧。这种效果能够为网页添加一种现代且吸引用户的交互体验，特别是当需要显示重要信息或者进行用户操作时。 首先，让...
微信小程序实现弹出层效果
10-17
在微信小程序开发中，实现弹出层效果是一项常见的需求，通常用于展示用户协议、帮助信息或者确认操作等。本篇将详细讲解如何在微信小程序中创建一个简单的弹出层，以供参考。 首先，我们要了解弹出层的基本结构。一...
微信小程序自定义弹出层效果
10-15
在实现弹出层效果时，这三个部分都将发挥关键作用。 1. WXML（结构层）： WXML文件用于描述页面的结构，这里我们创建了一个名为`popup`的view容器，通过`wx:if="{{popShow}}"`控制其显示与隐藏。`popup`内包含一个...
点击弹出div圆角的遮罩层,可关闭
11-12
在网页设计中，创建一个点击弹出的div圆角遮罩层是常见的交互效果，它通常用于展示模态对话框、提示信息或者加载内容。这个功能的实现涉及到HTML、CSS和可能的JavaScript技术。下面我们将详细讲解如何创建这样一个...
利用HTML、CSS实现的图片预览弹出层的教程
09-25
`#ImageScaBg`是全屏黑色半透明背景，而`#ImageSca`是弹出层的主体，设置绝对定位，具有圆角边框，初始状态也是隐藏的。 接下来是JavaScript/jQuery部分，虽然这里没有给出具体的代码，但通常会涉及以下步骤： 1. ...
JavaScript点击按钮后弹出透明浮动层的方法
10-24
主要介绍了JavaScript点击按钮后弹出透明浮动层的方法,可实现点击按钮弹出居中的透明浮动层的效果,涉及javascript操作鼠标事件及页面样式的相关技巧,需要的朋友可以参考下
jquery+css3右侧弹出伸缩导航菜单
06-09
默认右侧折叠起来的导航，点击后向左侧无限弹出，直到碰壁位置，点击后再次收缩，效果很不错。
点击按钮弹出表单对话框带透明遮罩
谦虚使人发胖的博客
12-07 1万+
使用模态对话框来请求用户在一个多步骤过程中输入数据。在内容区域嵌入 form 标记，设置 modal 选项为 true，并通过 buttons 选项来指定主要的和次要的用户动作 1. 按钮 2. 用于显示弹窗窗口的div 名称： 3. 使用 Jquery设置 function aa() { $(function() { var name1 = $("#n
Flutter 模仿知乎加号按键 添加半透明路由页面
havdzy的博客
02-19 1190
本文使用flutter模仿知乎的加号按键，实现了在原有页面上添加半透明页面，点击空白处返回的效果。
点击按钮或者文字弹出div 块
yanyuan1993的博客
11-14 2204
JQuery弹出层，点击按钮后弹出遮罩层，还有关闭按钮   &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;jQuery弹出层效果&lt;/title&gt; &lt;meta content="网页特效,特效代码,jQuery,css特效,
div+css实现简单的弹出窗（背景变灰色）
热门推荐
leedaning的专栏
05-26 2万+
自己做了一个网站，需要用到弹出框的功能，以前没做过这个，就去网上查了下资料，然后试着写了一个最简单的弹出框效果。 需求：点击弹出框按钮，在原页面基础上弹出一个弹出框，并且背景要变成灰色，原页面不能被编辑知道关闭弹出框。 原理：在原页面的基础上添加两个div，一个是弹出框，一个是弹出框后面的背景层（页面变灰）。首先这两个div是跟原页面的代码在一起存放的，只不过使用了display：none这个c
如何使用纯js实现一个带有灰色半透明背景的弹出框
YuqiRealm.com
03-06 4454
// 加入透明背景 var body = document.body; var backgroundDiv = document.createElement("div"); backgroundDiv.style.cssText = "left:0;top:0;position:fixed;background:#ddd;opacity:0.8;width:100%;height:100%"; bo
uniappp弹出层圆角
最新发布
09-22
uniappp弹出层可以通过CSS来实现圆角效果。你可以使用border-radius属性来设置元素的圆角半径，以创建圆角效果。具体来说，你可以将border-radius设置为一个具体的数值或百分比来定义圆角的大小。例如，如果你想要一个具有10像素的圆角的圆角弹出层，你可以这样设置CSS样式： ``` .uniappp-popup { border-radius: 10px; } ``` 这样，uniappp弹出层就会显示出一个带有10像素圆角的圆角矩形。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值