html5如何实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框_百度知 ...
发布网友
发布时间：2022-04-23 20:56
我来回答
共3个回答
热心网友
时间：2022-04-06 12:50
通过jquery的show()和hide()函数联合使用，实现弹出窗口。
一、show（）和hide（）函数解析：
1、show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
三、设计遮罩层的样式，如下：
四、弹出窗口的css样式，代码如下：
五、初始页面如下：
六、点击按钮，查看弹出窗口结果：
七、关闭弹出窗后，打开开发者中心，如下：
热心网友
时间：2022-04-06 14:08
你好，遮罩层样式可以用CSS写，用js/jquery控制显示隐藏就可以了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
*{padding: 0; margin: 0}
.box{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
display: none;
}
.box1{
width: 500px;
height: 500px;
position: fixed;left: 50%; top: 25%;
margin-left: -250px;
border: 1px solid #000000;
}
</style>
<script>
</script>
</head>
<body>
<div class="box">
<div class="box1">
<a href="javascript:;" onclick="jQuery('.box').hide()" class="close">关闭</a>
</div>
</div>
<a href="javascript:;" onclick="jQuery('.box').show()" class="show">显示</a>
</body>
</html>
追问你好，非常感谢，代码可用，但是有个问题 这边为什么要加一个javascript:，可不可以不加，或者替换成别的代码？
追答 完全可以去掉href，这里只是个示例，完全可以用button代替，看自己的习惯，我这里用的是a标签
希望可以帮助到你，望采纳
热心网友
时间：2022-04-06 15:43
<div id="show">
<div data-role="controlgroup" id="btnGroups" data-type="vertical" style="min-height:80px; max-height:237px;overflow-y:auto;">
<label for="1">1</label><input type="radio" name="a" id="1" value="1" />
<label for="2">2</label><input type="radio" name="a" id="2" value="2" />
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a name="yes" data-role="button" style="display: block;font-size:16px;">同意</a>
</div>
<div class="ui-block-b">
<a data-role="button" id="cancelBtnPage" style="display: block;font-size:16px;">取消</a>
</div>
</div>
</div>
<div id="bg"></div>
<a href="#" data-role="button" id="yesNextBtn" style="display: block;font-size:16px;">同意</a>
-------------------------------------------------------------------------------------
Js代码
$('#yesNextBtn').click(function(){
//消除radio按钮上的checked
$('#btnGroups').find('input[type=radio]').each(function(){
$(this).removeProp("checked").checkboxradio("refresh");
})
document.getElementById("bg").style.display ="block";
document.getElementById("show").style.display ="block";
$('html,body').animate({scrollTop: '0px'}, 100);//因为页面很长，有纵向滚动条，先让页面滚动到最顶端，然后禁止滑动事件，这样可以使遮罩层锁住整个屏幕
$('#bg').bind("touchmove",function(e){
e.preventDefault();
});
})
-------------------------------------------------------------------------------------
#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
#show{display: none; position: absolute; top: 25%; left: 18%; width: 63%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
弹出框关闭后,如何不刷新后面页面?
return false;}
...短信权限、无障碍服务等功能时怎么会弹受限提示框呢?
侧载应用的部分功能或者权限 会受限制访问或者设置：短信权限、默认应用（电话、短信应用）、无障碍、使用情况访问权限、显示在其他应用上层、设备和应用通知、设备管理应用 2、申请这些权限或者开启这些功能时，会弹出风险受限提示框，可以选择保持限制（则功能和对应权限保持关闭）、解除限制（解除后，此应用...
js怎么实现文本框里面输入什么的数字就从什么数字开始倒计时然后结束...
你好，代码如下，望采纳 第一种：<body> <input type="number" id="num" value=""/> <button onclick="ks();">开始</button> <script> function ks(){ var currentValue = document.getElementById("num").value;while (currentValue>0) { document.getElementById("num").value = --...
WINCC中怎样用一个布尔变量触发一个用作操作提示的对话框弹出...
在画面里建一个按扭，选中后，在窗口右上角有动态向导，在画面功能这个选项里面有个“显示错误框”，双击就会出来向导，跟着向导修改就行啦！意思嘛也是弹出个窗口，不过是人为的控制的，不知道你用不用得上，希望对你有帮助！
小程序如何写个10秒倒计时然后弹出提示框
1、首先打开小程序开发工具新建一个小程序。2、接着编写wxml中的倒计时页面样式，如下图所示。3、然后定义倒计时需要用到的变量，如下图所示，其中结束时间大多数都是从后台获取的。4、接着编写倒计时函数，如下图所示，这里主要用到了定时器的功能，如下图所示。5、接下来在需要调用的地方调用倒计时...
怎么关闭自动续费?
在免密支付/自动扣款页面,你可以看到所有开启了自动续费的服务,选择你想要取消的服务,点击【关闭】。在弹出的提示框中,点击【确认关闭】,即可成功取消自动续费。 二、微信自动续费 如果你使用微信支付了某些服务,并且开启了自动续费,你可以通过以下步骤来取消:打开微信,点击右下角的【我】,再点击右上角的【···...
微信聊天记录怎样彻底删除
下面,就教大家一个简单的方法,按步骤操作就可以: 支持工具: 品牌型号:vivo Y31s系统:Funtouch OS_10.5软件版本:微信8.0.19 1、打开微信进入主页【有“我”的主页,看下图提示】,点开【设置】选项。 2、点开【聊天】。 3、点击【清空聊天记录】。 4、弹出提示框,最后点击【清空】即可。 这个操作就可以彻底...
...要重起电脑后才会好~~大家如果知道请告诉我
1、出现系统错误对话框 被攻击的用户,如果病毒攻击失败,则用户的电脑会出现 LSA Shell 服务异常框,接着出现一分钟后重启计算机的“系统关机”框。2、系统日志中出现相应记录 如果用户无法确定自己的电脑是否出现过上述的异常框或系统重启提示,还可以通过查看系统日志的办法确定是否中毒。方法是,运行事件查看器程序,...
京东白条怎么关闭预约还款
接着,进入自动还款界面,在界面中点击按钮,关闭自动还款功能。如图: 接着,在弹出的信息提示对话框中点击“确定”。如图: 接着,等待系统自动设置完成,完成后,回到还款界面,即可看到自动还款已经关闭了。如图: 最后,京东白条自动还款关闭 注意;白条虽然可以解决燃眉之急,但是总归是借的钱,最好不要开通这些借钱软件,如...
...窗、短信权限、无障碍服务等功能时怎么会弹受限提示框?
侧载应用的部分功能或者权限 会受限制访问或者设置：短信权限、默认应用（电话、短信应用）、无障碍、使用情况访问权限、显示在其他应用上层、设备和应用通知、设备管理应用 2、申请这些权限或者开启这些功能时，会弹出风险受限提示框，可以选择保持限制（则功能和对应权限保持关闭）、解除限制（解除后，此应用...
