jquery完全遮盖+弹出框

最新推荐文章于 2021-05-30 22:59:34 发布
最新推荐文章于 2021-05-30 22:59:34 发布
阅读量201 收藏
点赞数
分类专栏： 前端开发-javascript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_7451/article/details/82535833
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script>
<style type="text/css">
#dialog-overlay {
	width: 100%;
	height: 100%;
	filter: alpha(opacity = 50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	position: absolute;
	background: #000;
	top: 0;
	left: 0;
	z-index: 3000;
	display: none;
}

#dialog-box {
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #eee;
	width: 328px;
	position: absolute;
	z-index: 5000;
	display: none;
}

#dialog-box .dialog-content {
	text-align: left;
	padding: 10px;
	margin: 13px;
	color: #666;
	font-family: arial;
	font-size: 11px;
}

a.button {
	margin: 10px auto 0 auto;
	text-align: center;
	background-color: #e33100;
	display: block;
	width: 50px;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	position: relative;
	cursor: pointer;
}

a.button:hover {
	background-color: #c33100;
}

#dialog-box .dialog-content p {
	font-weight: 700;
	margin: 0;
}

#dialog-box .dialog-content ul {
	margin: 10px 0 10px 20px;
	padding: 0;
	height: 50px;
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$('a.btn-ok, #dialog-overlay, #dialog-box').click(function() {
			$('#dialog-overlay, #dialog-box').hide();
			return false;
		});
		$(window).resize(function() {
			if (!$('#dialog-box').is(':hidden'))
				popup();
		});
	});
	//Popup dialog
	function popup(message) {
		var maskHeight = $(document).height();//重点
		var maskWidth = $(window).width();//重点
		var dialogTop = (maskHeight / 2) - ($('#dialog-box').height() / 2);//重点
		var dialogLeft = (maskWidth / 2) - ($('#dialog-box').width() / 2);//重点
		$('#dialog-overlay').css({
			height : maskHeight,
			width : maskWidth
		}).show();
		$('#dialog-box').css({
			top : dialogTop,
			left : dialogLeft
		}).show();
		$('#dialog-message').html(message);
	}
</script>
</head>
<body
	οnlοad="popup('abc')">
	<a href="javascript:popup('abc')">猛击此处，弹出层!</a>
	<div id="dialog-overlay"></div>
	<div id="dialog-box">
		<div class="dialog-content">
			<div id="dialog-message"></div>
			<a href="#" class="button">关闭</a>
		</div>
	</div>
</body>
</html>

 

iteye_7451
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现遮罩层功能
丑小鸭变黑天鹅的博客
03-31 3550
jQuery实现遮罩层功能 我们做项目的时候，有一种效果会经常使用到，就是遮罩层，当我们点击某个按钮时，希望动态弹出一个输入块，并且想要他的背景是透明的，而要输入的块不透明，效果如下 那么这个效果怎么实现呢，阿飞给你一一道来。 思路： 我们需要一个最外层div去做透明背景，然后需要一个div去做输入块。总的来说就是这两层div。 起初我们都设置其为display:none，然后通过js代码实现，当点击的时候让其显示 大概思路就是这样，接下来直接上代码 html代码 <div class="mask"
jquery自定义弹框
weixin_43727538的博客
07-29 690
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="ut...
html遮罩弹窗原理,带遮罩层的弹窗.html
weixin_34501965的博客
05-30 567
button{display: block;margin: auto;width: 100px;height: 50px;}.tanchuang{position: fixed;width: 500px;height: 200px;top: calc(50% - 100px);left: calc(50% - 250px);background-color: #FFFFFF;border: #eb...
遮盖层加弹出框页面布局不影响
技术心得
11-08 1858
function ShowNo() //隐藏两个层            {               document.getElementById("doing").style.display = "none";               document.getElementById("divLogin").style.display = "none";           }
超好用的Jquery弹出框和遮盖层
12-22
非常好用的jquery弹出框，也可做弹出层，遮盖层
colorbox 弹出层 jquery
万维网
09-27 3866
$(".inline").colorbox({inline:true, width:"50%"}); Inline HTML This content comes from a hidden element on this page. The inline option preserves bound JavaScript events and changes, and it put
jQuery+HTML5手机移动端遮罩弹出菜单代码
06-05
在这个案例中，jQuery被用来控制弹出菜单的显示和隐藏，以及处理用户与菜单的交互。通过简单的jQuery选择器和方法，我们可以快速地定位到页面元素，并实现复杂的动态效果。 HTML5作为现代Web开发的标准，提供了许多...
可自己添加html的伪弹出框实现代码
09-05
另一个是背景层 `#backgroundPopup`，它通常是半透明的，用于遮盖主页面内容，使弹出框更加突出。这两个元素最初都设置为 `display: none`，在需要时通过JavaScript显示。 6. **样式应用**：为了实现弹出框的视觉...
jQuery点击弹出框城市选择器代码
05-01
模态对话框在页面上创建了一个浮层，遮盖了背景内容，使得用户只能与弹出框交互。例如，使用Bootstrap的`modal`，代码可能如下： ```html <!-- 城市列表将放置在这里 --> ``` 城市列表通常以`<select>`...
jquery实现弹窗功能（窗口居中显示）
12-03
效果图： 代码如下： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出确认框始终位于窗口的中间位置的测试</title> <style type="text/css"> .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50);
19款 jquery-css3 js遮罩弹出层（浮动窗口）特效.rar
07-10
本源码收集了19款基于jquery-css3实现的js遮罩弹窗效果,弹出层，就是大家熟悉的浮动窗口，由html5 CSS3 JS jQuery联合实现的可自定义的弹出窗口，实例效果丰富，调用简单，初学者也可看懂。一个HTML5页面演示了19种弹出框效果，带动画效果，还有3D切换风格，弹出框自适应网页大小，其中一款的效果截图所图所示。
jQuery封装的几款弹出层类，可直接使用
12-06
jQuery封装的几款弹出层类，可直接new 使用
jQuery实现简单弹窗遮罩效果
10-20
本文主要介绍了jquery实现简单弹窗遮罩效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
jQuery遮罩层实现方法实例详解(附遮罩层插件)
11-24
本文实例分析了jQuery遮罩层实现方法。分享给大家供大家参考，具体如下： 1 背景半透明遮罩层样式 需要一个黑色（当然也可以其他）背景，且须设置为绝对定位，以下是项目中用到的css样式： /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 10
jQuery Dialog 弹出层对话框插件
10-28
jQuery Dialog 是一个自定义的弹出层对话框插件，开发者因为找不到满足需求的现有解决方案，于是决定自行创建，同时也借此机会学习jQuery插件的开发。这个插件的核心原理是利用JavaScript动态创建一个div元素作为...
用jQuery实现页面遮罩弹出框
前端岚枫
08-01 3777
页面遮罩弹出框是最常见的一种情况，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html,  html代码如下：    点击这里查看效果                         关闭         正在加载，请稍后....         css代码如下：    body {     font-family:Ari
jquery、div、css制作遮挡层
wangjun5159的专栏
06-24 3188
在日常开发中经常会用到遮挡层，一直没有机会研究，今天实现了，感觉原理原来如此简单。不过，这些很小的知识点，必须都弄清楚，基础才能好，才能走的更远。 遮挡层效果图： 遮挡层实现原理：   修改某个隐藏的div样式，由隐藏修改为展现，宽度和高度与浏览器窗口相等。 注意细节：    div需要设置z-index,这个属性，顾名思义，是在y轴上的索引，你可以理解为垂直于屏幕的高度
弹窗遮罩的几种实现方式
吾非燕的博客
05-18 7382
前端一种常见的场景就是弹窗之后背后有一层遮罩层，可以用几种不同的方式实现。方法一： html:<div class="mask"></div> <div class="warn"> <div class="title">提示</div> <div class="content">即将推出，敬请期待</div> <div class="i_know">我知道了</div> <
CSS实现覆盖弹窗（效果如JQuery-UI的Dialog）
weixin_30672019的博客
03-25 218
原理：定义一个新的div用来覆盖整个页面，再把想要弹出的窗口放在这个div上面 1、定义一个div，设置其隐藏（display:none），用于覆盖整个页面，并设置其CSS属性为： 　　　　#divBg { z-index:99; position:absolute; wid...
jquery ui 弹出框自定义html
最新发布
07-12
在 jQuery UI 的弹出框中，你可以自定义弹出框的内容，包括 HTML 结构和样式。你可以通过以下步骤来实现： 1. 创建一个 HTML 元素来作为弹出框的容器，并设置一个唯一的 ID： ```html <div id="myDialog" title="弹出框标题"></div> ``` 2. 使用 jQuery UI 中的 `dialog()` 方法初始化弹出框，并设置相关选项。其中，`autoOpen` 设置为 `false` 可以让弹出框初始化时不自动打开： ```javascript $("#myDialog").dialog({ autoOpen: false, modal: true, // 设置为模态对话框 buttons: { "确认": function() { // 点击确认按钮后的回调函数 }, "取消": function() { $(this).dialog("close"); // 关闭弹出框 } } }); ``` 3. 使用 jQuery 的方法来添加自定义的 HTML 内容到弹出框中。例如，使用 `html()` 方法来设置弹出框的内容： ```javascript $("#myDialog").html("<p>这是自定义的弹出框内容。</p><input type='text' name='myInput'>"); ``` 在上述示例中，使用了 `<p>` 元素和一个 `<input>` 元素作为自定义内容。 4. 当需要弹出框时，可以调用 `dialog("open")` 方法来打开弹出框： ```javascript $("#myDialog").dialog("open"); ``` 通过以上步骤，你可以在 jQuery UI 弹出框中自定义 HTML 内容。你可以根据需要添加任意数量和类型的 HTML 元素，并使用 CSS 来自定义样式。请注意，具体的实现可能因你的需求和使用的 jQuery UI 版本而有所不同，以上提供了一种通用的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值