> 唯美句子 > javascript如何实现弹出浮动窗口

javascript如何实现弹出浮动窗口

<html>

<head>

<title>Js弹出浮动窗口,支持鼠标拖动和关闭</title>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<scripttype="text/javascript">

/**

关于一些参数说明:

*bodycontent:要在窗口显示的内容,dom对象

*title:窗口标题,字符串类型

*removeable:窗口能否拖动,布尔类型

*注意:内容窗体的高度是height-30px,请计算好你要显示的内容的高度和宽度。弹出窗的id为"223238909",所以你的页面不要再取值为"223238909"的id了,以防js执行出错*/

functioncreatedialog(width,height,bodycontent,title,removeable){

if(document.getElementById("www_phpstudy_net")==null){

/*创建窗口的组成元素*/

vardialog=document.createElement("div");

vardialogtitlebar=document.createElement("div");

vardialogbody=document.createElement("div");

vardialogtitleimg=document.createElement("span");

vardialogtitle=document.createElement("span");

vardialogclose=document.createElement("span");

varcloseaction=document.createElement("button");

/*为窗口设置一个id,id如此怪异是为了尽量避免与其他用户取的id相同而出错*/

dialog.id="223238909";

/*组装对话框标题栏,按从里到外的顺序组装*/

dialogtitle.innerHTML=title;

dialogtitlebar.appendChild(dialogtitleimg);

dialogtitlebar.appendChild(dialogtitle);

dialogtitlebar.appendChild(dialogclose);

dialogclose.appendChild(closeaction);

/*组装对话框主体内容*/

if(bodycontent!=null){

bodycontent.style.display="block";

dialogbody.appendChild(bodycontent);

}

/*组装成完整的对话框*/

dialog.appendChild(dialogtitlebar);

dialog.appendChild(dialogbody);

/*设置窗口组成元素的样式*/

vartempleft,temptop,tempheight//窗口的位置(将窗口放在页面中间的辅助变量)

vardialogcssText,dialogbodycssText;//拼出dialog和dialogbody的样式字符串

templeft=(document.body.clientWidth-width)/2;

temptop=(document.body.clientHeight-height)/2;

tempheight=height-30;

dialogcssText="position:absolute;background:#65c294;padding:1px;border:4px;top:"+temptop+"px;left:"+templeft+"px;height:"+height+"px;width:"+width+"px;";

dialogbodycssText="width:100%;background:#ffffff;"+"height:"+tempheight+"px;";

dialog.style.cssText=dialogcssText;

dialogtitlebar.style.cssText="height:30px;width:100%;background:url(images/titlebar.png)repeat;cursor:move;";

dialogbody.style.cssText=dialogbodycssText;

dialogtitleimg.style.cssText="float:left;height:20px;width:20px;background:url(images/40.gif);"+"display:block;margin:4px;line-height:20px;";

dialogtitle.style.cssText="font-size:16px;float:left;display:block;margin:4px;line-height:20px;";

dialogclose.style.cssText="float:right;display:block;margin:4px;line-height:20px;";

closeaction.style.cssText="height:20px;width:24px;border-width:1px;"+"background-image:url(images/close.png);cursor:pointer;";

/*为窗口元素注册事件*/

vardialogleft=parseInt(dialog.style.left);

vardialogtop=parseInt(dialog.style.top);

varismousedown=false;//标志鼠标是否按下

/*关闭按钮的事件*/

closeaction.onclick=function(){

dialog.parentNode.removeChild(dialog);

}

/*实现窗口的移动,这段代码很典型,网上很多类似的代码*/

if(removeable==true){

varismousedown=false;

vardialogleft,dialogtop;

vardownX,downY;

dialogleft=parseInt(dialog.style.left);

dialogtop=parseInt(dialog.style.top);

dialogtitlebar.onmousedown=function(e){

ismousedown=true;

downX=e.clientX;

downY=e.clientY;

}

document.onmousemove=function(e){

if(ismousedown){

dialog.style.top=e.clientY-downY+dialogtop+"px";

dialog.style.left=e.clientX-downX+dialogleft+"px";

}

}

/*松开鼠标时要重新计算当前窗口的位置*/

document.onmouseup=function(){

dialogleft=parseInt(dialog.style.left);

dialogtop=parseInt(dialog.style.top);

ismousedown=false;

}

}

returndialog;

}//endif(if的结束)

}

</script>

<style>

table{background:#b2d235;}

button{font-size:12px;height:23;background:#ece9d8;border-width:1;}

#linkurl,#linkname,#savelink{width:100px;}

</style>

</head>

<body>

<!--显示窗口的地方-->

<divid="here"></div><aid="clickhere"href="#">点击生成窗口</a>

<!--要嵌入到窗口的内容-->

<divid="login"style="display:none;">

<formaction="#"method="post"onSubmit="returnfalse;">

<tablewidth="400"height="95">

<tr>

<tdwidth="78">链接文字</td>

<tdwidth="168"><inputname="link.name"type="text"/></td>

<tdwidth="138"id="linktext"></td>

</tr>

<tr>

<td>链接地址</td>

<td><inputname="link.url"type="text"/></td>

<tdid="linkurl"></td>

</tr>

<tr>

<td></td>

<td><buttontype="submit"style="float:right;">添加</button></td>

<tdid="savelink"></td>

</tr>

</table>

</form>

</div>

<scripttype="text/javascript">

varhere=document.getElementById("here");

varlogin=document.getElementById("login");

varclickhere=document.getElementById("clickhere");

clickhere.onclick=function(){

here.appendChild(createdialog(400,95+30,login,"欢迎光临phpstudy",true));

}

</script>

</body>

</html>

点击文本框 JS弹出窗口 在弹出窗口中选择的数据显示在文本框里 哪位...

给个例子你,两个页面,一个是主页面,点击文本框的时候弹出第二个页面,弹出页面里有一个下拉列表选择,当选择一个值后,自己关闭,第一个页面文本框里就已经有选择值了。

本地测试时,允许运行JavaScript。

1.htmlnew document &lt;&amp;#47;script&gt;2. htmlnew document function selectvalue(values){opener.document.getElementById('values').value=values;window.close();}&lt;&amp;#47;script&gt;请选择值值1值2值3值4

javascript如何实现弹出窗口

实现原理: 首先,我们将弹出框中的内容放置在一个特殊的DIV层中,然后默认隐藏它(即初始不可见,使用CSS即可实现)。

当用户执行某个动作时——比如点击某个链接或者将鼠标光标移动到某个链接上——我们将之前设置好的隐藏层显示在所有页面元素的最上层(将使用JS操作实现)。

此外,我们还将在弹出DIV窗口中设置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。

实现过程: 就如我上面提到的,我们首先需要创建一个特殊的DIV层,然后我们将弹出窗口的内容放在这个DIV层里面。

在这里,我们将其ID命名为“popupcontent ”以区别于其他DIV层。

怎么让js的弹出窗口自动关闭

使用以下方法屏蔽页面弹出窗口或打开页面:1、window.open=null; //屏蔽window.open打开新页面2.window.showModalDialog=null;//屏蔽window.showModalDialog打开模态窗口3、window.showModelessDialog=null;//屏蔽window.showModelessDialog打开非模态窗口补充:有些弹出窗口使用的是div显示的假窗口。

应视具体情况采取措施。

JavaScript怎么实现网页右下角弹出窗口代码

JavaScript实现网页右下角弹出窗口代码#winpop { width:200px; height:0px;position:absolute; right:0; bottom:0; border:1px solid #666; margin:0;padding:1px; overflow:hidden; display:none;}#winpop .title { width:100%; height:22px;line-height:20px; background:#FFCC00; font-weight:bold; text-align:center;font-size:12px;}#winpop .con { width:100%; height:90px;line-height:80px; font-weight:bold; font-size:12px; color:#FF0000;text-decoration:underline; text-align:center} /* http://www.webdm.cn */#silu { font-size:12px; color:#666;position:absolute; right:0; text-align:right; text-decoration:underline;line-height:22px;}.close { position:absolute; right:4px;top:-1px; color:#FFF; cursor:pointer}function tips_pop(){var MsgPop=document.getElementById("winpop");var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字if (popH==0){MsgPop.style.display="block";//显示隐藏的窗口show=setInterval("changeH('up')",2);}else {hide=setInterval("changeH('down')",2);}}function changeH(str) {varMsgPop=document.getElementById("winpop");varpopH=parseInt(MsgPop.style.height);if(str=="up"){if(popH&lt;=100){MsgPop.style.height=(popH+4).toString()+"px";}else{ clearInterval(show);}}if(str=="down"){if(popH&gt;=4){ MsgPop.style.height=(popH-4).toString()+"px";}else{clearInterval(hide); MsgPop.style.display="none"; //隐藏DIV}}}window.onload=function(){//加载document.getElementById('winpop').style.height='0px';setTimeout("tips_pop()",800);//3秒后调用tips_pop()这个函数}&lt;&amp;#47;script&gt;3秒后会在右下角自动弹出窗口,如果没有弹出请点击这个按钮您有新的短消息!X1条经典语录(

js弹出窗口,怎么让它没有标题栏,并设置边框样式,比如阴影。

你指的弹出窗口是指alert这样的js自带的弹窗,还是只自定义浮于其他组件上的弹窗?系统自带的,确认框也好,输入框也好,都是有阻塞的,因为js是单线程语言,所以弹窗弹出后,整个页面都会阻塞,你的下一步操作可以放在弹窗之后,因为只有完成了弹窗的关闭,之后的代码块才会执行,也就是说在此之后默认就是弹窗关闭了,对于有返回值的也可以用返回值判断。

其次就是自定义的弹窗,一般就是div一个遮罩层和一个业务层,使用绝对布局加z-index就可以,这种要判断弹窗是否关闭一般来说有两种,一是生成型弹窗,用js生成,平时不存在与html中,用寻找对应id的组件是否存在的方式就可以判断是否处于关闭状态,二是隐藏型弹窗,给一个display:none的属性,要弹出时就将属性更改为block之类,一般这种就是直接比较这个div的样式中display是否等于none就可以了。

JS弹出窗口,但不是打开一个新的页面。

如果要 在当前页面浏览子页面,建议用 window.open(URL,name,features,replace)一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。

这个名称可以用作标记 和 的属性 target 的值。

如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。

在这种情况下,features 将被忽略。

javascript如何实现弹出浮动窗口:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!