js实现弹窗居中的简单实例
在一些页面中,我们总会遇到一些弹窗不居中的时候,还要根据浏览器的大小来调整弹窗的弹出位置,
之前我也遇到这样的问题,现在我把我知道的呈现给大家
css样式
.windowBox{ width:500px; } .mid-tanBox{ position: fixed; top: 50%; left: 50%; margin-left: -250px; background: #fff; border:1px solid red; display:none }
html代码
<div class='windowBox'> <div class ="mid-tanBox"></div> <div class="jclick">弹窗</div> </div>
jQuery代码自动:
$(".jclick").click(function(i){ var height = $(".mid-tanBox").height(); var eheight = height/2; $(".mid-tanBox").eq(i).css("margin-top","-eheight"); })
以上就是小编为大家带来的js实现弹窗居中的简单实例全部内容了,希望大家多多支持我们~
相关推荐
-
JS弹出居中的DIV的代码
首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义 document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度.大小随着浏览器的窗口大小而改变. document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度.大小随着浏览器的窗口大小而改变. document.body.scrollTop(网页被卷去的高):是指拉
-
Js控制弹窗实现在任意分辨率下居中显示
贴代码 复制代码 代码如下: <!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
-
javascript之弹出窗口居中的代码
function openWin(u, w, h) { var l = (screen.width - w) / 2; var t = (screen.height - h) / 2; var s = 'width=' + w + ', height=' + h + ', top=' + t + ', left=' + l; s += ', toolbar=no, scrollbars=no, menubar=no, location=no, resizable=no'; open(u, 'oW
-
js实现弹窗居中的简单实例
在一些页面中,我们总会遇到一些弹窗不居中的时候,还要根据浏览器的大小来调整弹窗的弹出位置, 之前我也遇到这样的问题,现在我把我知道的呈现给大家 css样式 .windowBox{ width:500px; } .mid-tanBox{ position: fixed; top: 50%; left: 50%; margin-left: -250px; background: #fff; border:1px solid red; display:none } html代码 <div class=
-
JS添加删除DIV的简单实例
JS添加删除DIV的简单实例 function addDiv(w,h){ //如果原来有"divCell"这个图层,先删除这个图层 deleteDiv(); //创建一个div var my = document.createElement("divCell"); //添加到页面 document.body.appendChild(my); //通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看 my.s
-
用js写的一个路由(简单实例)
前几天在网上看了一个大牛用js写了一个路由的,有一句代码一直不知道怎么回事,后来就自己写了一个,写的比较的粗糙,我觉得把面向对象的思想都搞得乱七八糟的,不过功能实现了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现路由</title> </head> <body> &l
-
js实现楼层效果的简单实例
今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>楼层切换</title> <style> *{padding: 0;margin: 0;} li{list-style: none;} .main img{width:
-
JS只能输入正整数的简单实例
如下所示: <html> <head> <title>只能输入正整数</title> </head> <body> 兑换数量:<input type="text" ID="txtNumber" Width="50px" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]
-
JS获取checkbox的个数简单实例
JS获取多选框checkbox被选中的个数. var checkbox = document.getElementsByName("likes[]"); //此处通过此种方式才能获得多选框为数组. //like为name = "like[]" , 获得时必须加上[] var checked_counts = 0; for(var i=0;i<checkbox.length;i++){ if(checkbox[i].checked){ //被选中的checkbo
-
原生js的数组除重复简单实例
js对数组的操作在平常的项目中也会遇到,除去一些增加,或者减少的操作外,还有一个比较重要的操作就是数组的除重,通过数组的除重,我们可以将一个数组中存在的多个重复的数组进行清理,只留下不重复的.另外下面我介绍一种原生就s的数组除重方法. Array.prototype.check= function(){ for(var i=0;i<this.length;i++){ for(var j=i+1;j<this.length;j++){ if(this[i]==this[j]){ this.spl
-
js方法数据验证的简单实例
实例如下: //input标签只能正数字 <input onkeyup="this.value=this.value.replace(/[^1-9]/g,'')" > //只能输入正整数 function CheckNum(thisobj) { if (thisobj.value == "0") { } else { var firstNum = thisobj.value.toString().substring(0, 1); if (thisobj.
-
表单元素值获取方式js及java方式的简单实例
大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢? 多说无用.上代码: Jsp-html代码: <form action="input.do" name="formkk"> <table>
-
JS 数字转换为大写金额的简单实例
JS 数字转换为大写金额的简单实例 function DX(n) { if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) return "数据非法"; var unit = "千百拾亿千百拾万千百拾元角分", str = ""; n += "00"; var p = n.indexOf('.'); if (p >= 0) n = n.substring(0, p) + n.substr(p+1,
随机推荐
- Java equals 方法与hashcode 方法的深入解析
- MySQL性能优化之路---修改配置文件my.cnf
- Python实现屏幕截图的代码及函数详解
- 理解Javascript_11_constructor实现原理
- 原生javascript实现分享到朋友圈功能 支持ios和android
- 详解JavaScript按概率随机生成事件
- thinkphp验证码的实现(form、ajax实现验证)
- PHP调用API接口实现天气查询功能的示例
- 用PHP+MySQL搭建聊天室功能实例代码
- php绝对路径与相对路径之间关系的的分析
- Android使用文件进行IPC
- js对字符的验证方法汇总
- flash as 最大最小按钮
- js判断ie方法集锦(含正则)代码短小经典 原创
- Linux(CentOS)环境下安装下载Nginx并配置
- jQuery聚合函数实例
- 关于进程间通信的Linux小程序
- php记录日志的实现代码
- 解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
- numpy中的高维数组转置实例