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

javascript如何实现弹出浮动窗口

唯美句子 06-19 188 0 

<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如何实现弹出浮动窗口：等您坐沙发呢！

发表评论

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