javascript 弹出层居中效果的制作

问题:做一个带拖动的弹出层效果(像提示框那种)
先写了一半,明天继续奋斗:

javascript 弹出层居中效果的制作

* { padding:0; margin:0; list-style:none; }

body { font-family:Verdana, Geneva, sans-serif; font-size:14px; }

#a { width:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; }

a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; }

a:hover { background-color:#333; color:#fff; font-weight:bold; }

window.onload=function divcenter()
{ var c=document.createElement("div");

document.body.appendChild(c);
c.setAttribute("id","a");
var divId=document.getElementById("a");
divId.innerHTML+="对浏览器变形,刷新看是否居中";
divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px";
setTimeout(function(){divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-50+"px";},200);

}

x:for(var i=1; i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

点击右下角的"OPEN"

javascript 弹出层居中效果的制作

* { padding:0; margin:0; list-style:none; }

body { font-family:Verdana, Geneva, sans-serif; font-size:14px; }

#a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; }

a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; }

a:hover { background-color:#333; color:#fff; font-weight:bold; }

#aa { position:fixed; bottom:20px; right:10px; }

var drg=true;
var ns=(document.all) ? false : true;
function divcenter()
{remove();
var c=document.createElement("div");
document.body.appendChild(c);
c.setAttribute("id","a");
c.setAttribute("dragable","dragable");
c.onmousedown=foo;

var divId=document.getElementById("a");
divId.innerHTML+="出现代码异常!
错误编号:0015;";
divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px";
setTimeout(function(){divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-50+"px";},100);

}
//移除
function remove(){
if(document.getElementById("a"))
{document.body.removeChild(document.getElementById("a"));
}}

function foo(){

if(drg){
if(document.getElementById("a")!=null)
{
obj=document.getElementById("a");
document.onmousedown=m_d;
document.onmouseup=m_u;
}
}
else
{

document.onmousemove=no_f;
document.onmousedown=no_f;
document.onmouseup=no_f;
}
}
function m_d(e){

document.onmousemove=m_m;
x=(ns)?e.pageX:event.x;
y=(ns)?e.pageY:event.y;
cx=obj.offsetLeft-x;
cy=obj.offsetTop-y;

}
function m_m(e){

drg=false;
x=(ns)?e.pageX:event.x;
y=(ns)?e.pageY:event.y;
obj.style.left=(cx+x)+"px";
obj.style.top=(cy+y)+"px";

}
function m_u(){
drg=true;
document.onmousedown=no_f;
document.onmousemove=no_f;
document.onmouseup=no_f;
}
function no_f(){
return false;}

open

x:for(var i=1; i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

关于每一步的理解,最后解释.毕竟代码还没完全整理
被从中间扩展缓冲的效果算法难住了!
*****************OK,也不算难****************
就是让div的left和top属性随着width一起渐变就行了

javascript 弹出层居中效果的制作

* { padding:0; margin:0; list-style:none; }

body { font-family:Verdana, Geneva, sans-serif; font-size:14px; }

#a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; }

a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; }

a:hover { background-color:#333; color:#fff; font-weight:bold; }

#aa { position:fixed; bottom:20px; right:10px; }

var drg=true;
var ns=(document.all) ? false : true;
function divcenter()
{remove();
var c=document.createElement("div");
document.body.appendChild(c);
c.setAttribute("id","a");
c.setAttribute("dragable","dragable");
c.onmousedown=foo;

var divId=document.getElementById("a");
divId.innerHTML+="出现代码异常!
错误编号:0015;";
//divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px";
//setTimeout(function(){divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-50+"px";},100);
h_w(300,80);
}
//移除
function remove(){
if(document.getElementById("a"))
{document.body.removeChild(document.getElementById("a"));
}}

function foo(){

if(drg){
if(document.getElementById("a")!=null)
{
obj=document.getElementById("a");
document.onmousedown=m_d;
document.onmouseup=m_u;
}
}
else
{

document.onmousemove=no_f;
document.onmousedown=no_f;
document.onmouseup=no_f;
}
}
function m_d(e){

document.onmousemove=m_m;
x=(ns)?e.pageX:event.x;
y=(ns)?e.pageY:event.y;
cx=obj.offsetLeft-x;
cy=obj.offsetTop-y;

}
function m_m(e){

drg=false;
x=(ns)?e.pageX:event.x;
y=(ns)?e.pageY:event.y;
obj.style.left=(cx+x)+"px";
obj.style.top=(cy+y)+"px";

}
function m_u(){
drg=true;
document.onmousedown=no_f;
document.onmousemove=no_f;
document.onmouseup=no_f;
}
function no_f(){
return false;}

function h_w(a,b){
divId=document.getElementById("a");
divId.style.width="0px";
divId.style.height="0px";
var s=function(){
var w=parseInt(divId.style.width);
if(w提交

x:for(var i=1; i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 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

  • 通过JavaScript使Div居中并随网页大小改变而改变

    通过JavaScript使Div居中并随网页大小改变而改变

    在使用Java做后台的时候,都会做到登录的页面,但是自己的页面太难看了,要居中没居中,要颜色没颜色,但是无论是怎么样都得使登录的框居中吧!以前的想法是通过CSS+Div使div居中,但是现在的想法变了,通过JavaScript可以简单的使Div在页面上居中,随着网页大小的改变做出相应的改变.而且只要明白了居中的原理轻而易举的就可以实现了. 先看一下居中的原理吧! 先看一张图.  从图中看到了什么?可以看到红色的框居中了,为什么会居中呢?通过观察可以发现红框的上下的蓝色的间距线是一样长的,这样可以

  • javascript图片自动缩放和垂直居中处理函数

    javascript图片自动缩放和垂直居中处理函数

    复制代码 代码如下: <html> <head> <title>Untitled</title> <style type="text/css"> .testCss{width:200px;height:300px;border:1px red solid;text-align:center;display:block;} .testCss1{width:300px;height:300px;border:1px red sol

  • javascript分页代码(当前页码居中)

    复制代码 代码如下: function setPage(opt){ if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; var allPageNum = opt.allPageNum; //总的页数 var showPageNum = opt.showPageNum; //显示的页数 var curpageNum = opt.curpag

  • javascript实现在指定元素中垂直水平居中

    javascript实现在指定元素中垂直水平居中

    本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <style type="text/css"> #box{ width:200px; height:150px; backgroun

  • JavaScript 未知高度元素垂直居中实现代码

    JavaScript未知高度元素的垂直居中的方法 function vMiddle(){ var middleDiv=document.getElementById("wrap"); var divHeight=middleDiv.offsetHeight; var bodyHeight=document.body.offsetHeight ; if(bodyHeight>divHeight) middleDiv.style.marginTop=-divHeight/2+&quo

  • JavaScript和CSS通过expression实现Table居中显示

    JavaScript和CSS通过expression实现Table居中显示

    上篇博客说的是将div设置为居中显示,今天来分享一下如何将表格居中的显示.至于居中的原理就不说了,可以看一下我的上篇博客,这次没有使用window的两个事件,而是使用一个叫expression的函数.现在多数的浏览器都支持这个函数.在写上一篇博客的时候,我脑里想能不能把计算后的值赋给css的left和top属性呢?后来查阅资料找到了这个函数.这个函数用来把CSS属性和JavaScript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义的属性.就是说CSS属性后面可以是一段Ja

  • javascript 弹出层居中效果的制作

    问题:做一个带拖动的弹出层效果(像提示框那种) 先写了一半,明天继续奋斗: javascript 弹出层居中效果的制作 * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f

  • html+javascript实现可拖动可提交的弹出层对话框效果

    html+javascript实现可拖动可提交的弹出层对话框效果

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JAVASCRI

  • vue中实现弹出层动画效果的示例代码

    1 <template> <div class="home"> <!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --> <transition name="mybox"> <div class="box" v-show="boxshow"></div> </transition> <button @click

  • jquery原创弹出层折叠效果点击折叠弹出一个层

    jquery原创弹出层折叠效果点击折叠弹出一个层

    弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: 复制代码 代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1> 复制代码 代码如下: *{ margin:0; padding:0;} body{ font:1

  • javascript弹出层输入框(示例代码)

    如下所示: 复制代码 代码如下: <script language="javascript" type="text/javascript">         function alertWin(title, msg, w, h) { var titleheight = "22px"; // 窗口标题高度             var bordercolor = "#666699"; //窗口的边框颜色      

  • 封装的原生javascript弹出层代码

    复制代码 代码如下: <script type="text/javascript">// <![CDATA[ /* @author: hongru.chen ** @date: 2010-09-15 ** @vision: 1.1 */ var Hongru = {}; function $(id){return document.getElementById(id)} Object.prototype.extend = function(target, /*opti

  • javascript 弹出层组件（升级版）

    这次还是利用原来代码的组织结构重新加强了功能,目前来说还有两个小问题,第一个是ie6下自定义弹出层会出现无法遮住select的情况,目前还没加入到组件里,可以自己在自定义的div里面加上ifame来遮罩,组件自带的弹出层可以遮住.第二个问题,由于是绝对定位,所以在改变浏览器窗口大小的时候会出现无法自动跟随.大家试试就知道了,当然问题肯定不少,只是这两个我认为比较重要的,暂时列出来,以后修复. 下面是代码,里面都有注释,可以直接运行. 在线演示 http://demo.jb51.net/js/20

  • jquery实现弹出层遮罩效果的简单实例

    复制代码 代码如下: <input type="button" value="高级搜索" id="click_test4" />";var content4 = "<center>高级搜索</center><form action='' method='post' id='formUserSuperSearch'>"   + "用户名 :  <input

  • 点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码

    复制代码 代码如下: <html><head><title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/cs

  • jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示       源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以

随机推荐