h5/web遮罩弹窗

前提下载一个js文件引入哦！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title></head><style>body {margin: 0 auto;}.cont {position: relative;width: 100%;height: 70px;}/*显示按钮*/.shows {position: absolute;left: 0;width: 50%;font-size: 20px;height: 70px;text-align: center;background-color: #2AC845;color: #fff;line-height: 70px;}/*隐藏*/.nones {position: absolute;right: 0;width: 50%;font-size: 20px;height: 70px;text-align: center;background-color: #DD524D;color: #fff;line-height: 70px;}/*弹窗*/.dislog {position: fixed;z-index: 999;width: 100%;height: 100%;display: none;text-align: center;background-color: #000;opacity: 0.8;}/*状态*/.list {position: relative;width: 100%;height: 70px;}.dis_cont {position: relative;border-radius: 10px;top: 25%;width: 80%;display: inline-block;height: 160px;background-color: #2AC845;}/*确认取消*/.dis_bott {position: absolute;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;border-top: 1px solid #ddd;width: 100%;height: 70px;background-color: #f5f5f5;bottom: 0px;}/*取消按钮*/.left_name {position: absolute;border-bottom-left-radius: 10px;text-align: center;left: 0px;width: 50%;height: 70px;line-height: 70px;background-color: #fff;}/*确认*/.right_name {position: absolute;text-align: center;border-bottom-right-radius: 10px;right: 0px;width: 49%;height: 70px;line-height: 70px;background-color: #fff;}/* 提示*/.cont_dis {position: relative;border-radius: 10px;text-align: center;width: 100%;height: 90px;font-size: 20px;display: flex;align-items: center;color: #fff;box-sizing: border-box;padding: 20px 20px;}</style><body><!--居中显示视图--><div class="dislog" style="display: {{nones}};"><!--内容--><div class="dis_cont"><div class="cont_dis">朋友，给老五点个赞好吗？</div><div class="dis_bott"><label class="left_name" onclick="cances()">取消</label><label class="right_name" onclick="submits()">确认</label></div></div></div><div class="cont"><div class="list"><label class="shows" onclick="shows()">显示</label><label class="nones" onclick="nones()">隐藏</label></div></div>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>//显示遮罩弹窗
function shows(){$(".dislog").css("display","block");
}//隐藏遮罩弹窗
function nones(){$(".dislog").css("display","none");
}function submits(){window.location="https://blog.csdn.net/qq_35695041";}//取消function cances(){$(".dislog").css("display","none");}
</script></body></html>

h5/web遮罩弹窗相关推荐

H5 Web Notification桌面推送消息
H5 Web Notification桌面推送消息由于这两天公司项目刚好做到一个需要实时桌面推送的功能,就像平时QQ,微信消息推送那种,这个时候我们就可以用到HTML5 Web Notificati ...
BasicModal - 简单易用的现代 Web App 弹窗
BasicModal 是为现代 Web 应用程序打造的弹窗系统.它包括所有你需要显示的信息,问题或接收用户的输入.这里的弹窗还可以链接起来,所以你可以很容易地建立一个预定义顺序的安装帮助或显示对话框. ...
苏州木渎计算机课程培训,苏州木渎H5/web全栈开发培训
课程名称:H5/web全栈开发课程类型:网页设计班型:全日制/周末班/晚班适用校区:全校区课程详情: 由于网络的发展以及人们使用网络的频繁性,企业需要通过网页呈现产品.服务.理念.文化,或向大 ...
web前端--弹窗广告实现
web前端–弹窗广告实现很多网站都有许多很烦人的弹窗广告,下面带来的就是一个烦人的弹窗广告效果. 效果图: 注意右下角,那就是我们的弹窗小广告,有点隐蔽. 下面就是代码实现: <!DOCTYP ...
QT控件系列一 | 半透明遮罩弹窗
QT控件系列一 | 半透明遮罩(弹窗) 文章目录 QT控件系列一 | 半透明遮罩(弹窗) 1.1 前言 1.2 原理(技术点) 1.3 使用 1.4 资源下载 1.1 前言我们看Windows桌 ...
自定义dialog弹窗html,自定义H5页面dialog弹窗
弹窗一: 样式如下: HTML代码://弹出窗通知取消确认 //遮罩层 $('.dialog .content').text(text); $('.dialog, .mark').removeC ...
h5/web 原生定位、高德、腾讯地图定位
在项目添加新功能时,使用cdn方式引入使用地图功能,使用功能只用到了地图的定位.点标记.详细地址查询.poi搜索和输入提示.计算两点之间的距离:因为在寻找高德地图问题时发现h5 和 web 端的好少, ...
h5 /web 手机端实现保存图片到本地相册 uni-app
文章目录首先,必须得知道的事情是: uni-app中是有保存图片到本地相册的api的:但是h5并不适用手机浏览器长按图片会出现保存图片的按钮直接进行保存图片,甚至在微信中还可以进行扫一扫 H5Pl ...
html页面弹出dialog,自定义H5页面dialog弹窗
弹窗一: 样式如下: HTML代码://弹出窗通知取消确认 //遮罩层 $('.dialog .content').text(text); $('.dialog, .mark').removeC ...

h5/web遮罩弹窗

前提下载一个js文件引入哦！

h5/web遮罩弹窗相关推荐

最新文章

热门文章