css+js修改加上一个关闭浮动窗口的按钮,加赏20财富值!

html-css085

css+js修改加上一个关闭浮动窗口的按钮,加赏20财富值!,第1张

加一个关闭按钮你应该可以自己搞定吧~就是在那个“-”号旁边再加一个按钮,然后这个按钮的功能这样写:

<div onclick="close()">关闭</div>

JS部分:

function close(){

document.getElementById("你这个浮动窗口的ID,例子中为extbkbox").style.display="none"

}

这样就关闭了~

一个很常见的网站提示栏,一般常用于首页,会给出一行提示文字,用方框框起来,再附上一个关闭按钮,配上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>

<title>可关闭的提示框</title>

<style>

#tips

{

position:relative

margin:0 auto

border:1px solid

#FA9150

padding:5px 10px 5px

10px

width:96%

background-color:#FEF1E9

line-height:160%

font-size:12px

}

#close

{

position:absolute

top:7px

right:8px

}

</style>

<script>

function

Close() {

document.getElementById("tips").style.display =

"none"

}

window.onload = function()

{

document.getElementById("tips").onclick =

Close

}

</script>

</head>

<body>

<p

id="tips">

(一)加入关闭按钮只要再加一个onclick 时间就行了,turnoff(‘ ’)里的参数可以改变。代码如下

<html><meta charset="gbk"><head><script>var hide=function(){var divs=document.getElementsByTagName("div") for (var i=0i<divs.length i++ ){divs[i].style.display="none" }}window.onload=function(){ hide() var a=document.getElementsByTagName("td") for(var i = 0i <a.lengthi++) {a[i].onclick = function(oEvent){oEvent = oEvent || eventhide() document.getElementById("div"+this.id).style.display="block" }}}// 加入关闭操作的函数function turnoff(obj){document.getElementById(obj).style.display="none"}</script></head><body><table ><tr><td id="1"><a href="#">弹出层1</a></td><td id="2"><a href="#">弹出层2</a></td><td id="3"><a href="#">弹出层3</a></td></tr></table><div id="div1" style="background:#0F0width:200pxheight:100px"><p>层1 </p><a href="#" onclick="turnoff('div1')">点击关闭</a></div><div id="div2" style="background:#00Fwidth:200pxheight:100px"><p>层2 </p><a href="#" onclick="turnoff('div2')">点击关闭</a></div><div id="div3" style="background:#F00width:200pxheight:100px"><p>层3 </p><a href="#" onclick="turnoff('div3')">点击关闭</a></div></body></html>(二)点击div之外的地方隐藏div,方法多种,但都是通过 js操作到事件源,判断这个事件源的ID是不是在要隐藏的div 即点击事件发生的范围是否在div之外,但前提是事件不能和你前面写的js事件发生冲突。 注册一个document.onclick或者document.onmousedown事件来监控鼠标点击div以外的区域时事件,你给这个div的id属性赋一个页面唯一的值比如<div id="tAnChu" />

代码如下:

document.onclick = function (event) { var e = event || window.event var elem = e.srcElement||e.target while(elem) { if(elem.id == "tAnChu") { return } elem = elem.parentNode } //隐藏div的方法 HiddenDiv() }

上个单一div事例:

<html> <head> <script type='text/javascript'> window.onload = function(){ document.onclick = function(e){ e = e || window.event var dom = e.srcElement|| e.targetif(dom.id !="tAnChu" &&document.getElementById("tAnChu").style.display == "block"){ document.getElementById("tAnChu").style.display = "none" }} } function openTanChu(e) {document.getElementById("tAnChu").style.display = "block" e = e||window.event if(+'\v1') {e.stopPropagation() } else {e.cancelBubble = true } }</script> <style> #tAnChu{position:fixed left:40% top:100px background-color:#ccc width:200px height:120px display:none }</style></head><body><input type="button" value="打开" onclick="openTanChu(event)" /> <div id="tAnChu"> 这是弹出层</div></body>