jquery 弹出框居中显示

最新推荐文章于 2022-12-04 18:26:13 发布
最新推荐文章于 2022-12-04 18:26:13 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Jquery 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clj9017/article/details/42987537
版权 
<!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: #ffffff; opacity: 0.1;  filter: alpha(opacity=10); z-index: 99; }
.mess { position: absolute; width: 270px; height: 140px; border: 1px solid #e0e0e0; background: #ffffff; text-align: center; z-index: 101; }
.mess_title{ margin:auto; background-color:#f6f0f3; height:50px; width:100%; line-height:50px;}
.fontsize1{ font-size:12px;}
.redcolor{ color:#ff0000;}
.clickclose{ cursor:pointer;}
.centerText{ line-height:25px; text-align:left; padding: 5px 0px 5px 0px;border-bottom:1px #e0e0e0 dotted;}
.botttomText { text-align:right; line-height:30px; height:30px;}
.botttomText a{ color:#ff6600;}
</style>
<script type="text/javascript">
$(document).ready(function() {
		var obj = $('.mess');
        var screenWidth = $(window).width(), screenHeight = $(window).height();  //当前浏览器窗口的 宽高
        var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度
   
        var objLeft = (screenWidth - obj.width())/2 ;
        var objTop = (screenHeight - obj.height())/2 + scrolltop;

        obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});

		$('.clickclose').click(function(){
			$('.mask').hide();
			$('.mess').hide();
		});
});
</script>
</head>
<body>

<div class="mask"></div>
<div class="mess">
<div class="mess_title">
<table width="100%" height="50" border="0" cellspacing="0" cellpadding="0" align="center" >
  <tr>
    <td width="210" align="left">   <b>温馨提示</b></td>
    <td align="center" class="fontsize1 clickclose">关闭</td>
  </tr>
</table>
</div>
<div class="fontsize1 centerText">
<span class="redcolor">    请尽快修改密码</span><br />
          你的密码存在安全风险，请尽快修改。
</div>
<div class="fontsize1 botttomText"><a href="">现在修改》</a></div>
</div>
</body>
</html>

fuyangclj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现突出显示效果
机器猫不吃鱼的博客
09-12 1514
jquery实现突出显示效果代码： 在HTML中写出要展示的图片，直接采用ul和li标签；加上图片的目录   突出展示效果 .nav ul li{ list-style: none; float:left; } body{ background-color: #000000;/*为了更好的看到突出效果,设置背景为黑色*/ } $(documen
jquery自定义弹框
weixin_43727538的博客
07-29 689
<!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...
jquery实现让弹出层绝对居中
07-18
jquery实现让弹出层绝对居中。
基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）...
永生天地
03-03 519
原理很简单： 获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度，加到刚刚的y轴坐标即可。 $(document)是获取整个网页的，$(window)是获取当前窗体的，这个要搞清楚。 最后把获取的坐标赋给窗体即可，窗体本身是绝对定位的，所以自然可以到...
设置弹出框水平、垂直居中
weixin_30352645的博客
08-11 123
自制一个友好的弹出框，当点击页面某个对象时，弹出提示框，一下是设置弹出框水平和垂直居中的代码： 1 function setElementCoordinate(obj) { 2 var d_width = document.documentElement.clientWidth;//计算当前可显示屏幕的宽度 3 var d_height = document.doc...
PyQt6中实现“窗口居中”和“确认框”
m0_74407084的博客
12-04 1487
1、实现窗口居中，代码如下： 2、确认框，确认框具备确认和取消按钮：
弹出框居中的三种写法
weixin_34062329的博客
08-27 2090
1、通过（浏览器显示区域的宽高—弹出框的宽高）/ 2计算出弹出框定位的top和left<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalabl...
jquery弹出框样式
07-31
总结来说，创建好看的jQuery弹出框样式涉及HTML结构设计、CSS样式定制以及jQuery事件处理。通过这些技术，我们可以实现交互性强且视觉效果出色的弹出框，从而提高网站或应用的用户满意度。实践过程中，不断调整和...
jquery弹出框
03-15
"jquery弹出框"是jQuery应用中的一个常见功能，用于向用户显示信息或者获取用户输入。在这个实例中，我们将深入探讨如何使用jQuery创建弹出框，并结合提供的"jqueryTcc"文件进行详细讲解。 首先，让我们理解什么是...
jquery居中弹出框
11-21
在本项目"jquery居中弹出框"中，我们聚焦于利用jQuery实现一个易于使用且样式的居中弹出框。这个解决方案旨在提供一个便捷的方法，使得开发者无需从零开始编写复杂的CSS和JavaScript代码，就可以快速地在网页上创建...
jQuery实现弹窗居中效果类似alert()
12-09
效果图如下所示： 废话不多说了，直接给大家贴代码了，具体代码如下所示： <!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; fi
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);
bootstrap 模态框（modal）实现水平垂直居中显示
11-28
众所周知，bootstrap是一款非常实用的CSS框架（主要用于样式的快速搭建），由于其简洁，美观，快捷，响应式等特点备受大家喜欢，但是其本身也是存在很多bug，当应对与具体的业务逻辑的时候往往达不到细节要求，比如今天我要谈的bootstrap的模态框，其默认是显示距离顶端30px，左右居中。        怎么让其在垂直方向也居中呢？        大家可能想加一个CSS样式，让其距离顶部距离变长，实践是检验真理的唯一标准，当你去试过会发现很多问题，在不修改源码的前提下修改插件并没有自由配置的样式一直是前端人员头疼的事情，在此，我小做研究，提出了两个方法： 1： $('#youMod
Jquery实现顶部弹出框特效
10-23
jQuery 部分则负责弹出框的显示和隐藏动画。`ToolTipTop` 对象有两个方法：`Show(Msg)` 用于显示弹出框，它将传入的消息赋值给 `.main i` 元素，并通过 `animate()` 函数将 `margin-top` 从 `-50px` 滑动到 `0px`，...
弹出框设置在页面居中
weixin_30794499的博客
06-29 414
思路： 　　1.获取当前页面的高和宽、针对顶部和左侧的滑动距离。 　　2.将弹出框的位置设为绝对位置。 3.设置弹出框针对屏幕的左侧和顶部的距离。 代码： html ： 　　 <div class="dialog"> 　　　...... //模态框内容　　 　　 </div> css: .dialog{ position:abosulte...
jQuery自定义alert,confirm方法及样式
辉少的博客
08-10 5625
jQuery自定义alert,confirm方法及样式 1.js代码（alert.js） (function($) { $.alerts = { alert: function(title, message, callback) { if( title == null ) title = 'Alert'; ...
JQuery 弹出层，始终显示在屏幕正中间
cui_angel的专栏
07-26 8301
上一篇是关于遮罩层的展示：   链接地址为：http://xutao5641745.iteye.com/blog/1310955   样式代码： .model{ position: absolute; z-index: 1003; width:320px; height:320px; text-align:center; background
jquery的弹出提示框位置居中
03-05 3764
基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）   原理： 获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度，加到刚刚的y轴坐标即可。 $(document)是获取整个网页的，$(window)是获取当前窗体的，
jQuery模态弹窗插件(jquery-confirm)
热门推荐
MingDaw的专栏
10-31 1万+
jquery-confirm组件包含两个资源文件，分别为：样式文件jquery-confirm.min.css和脚本文件jquery-confirm.min.js。jquery-confirm官网地址：https://craftpip.github.io/jquery-confirm/注：jquery-confirm依赖于jQuery，如果你还需要响应式布局，则还依赖Bootstrap。如果你的前端项目中还在使用jQuery，那么jquery-confirm是你模态弹窗的完美选择。
jquery showDialog弹出框 打开剧中显示
最新发布
05-24
可以使用下面的CSS样式来使jquery showDialog弹出框剧中显示： ...然后在你的jQuery代码中使用以下语句来打开弹出框并使其居中显示： ```javascript $("#dialog-box").showDialog(); ``` 希望这对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值