js出現div的代碼,js控制div顯示

本文目錄一覽：

• 1、如何js彈出div
• 2、js顯示和隱藏div如何修改
• 3、點擊按鈕彈出一個div，再點擊按鈕或點擊其他區域關閉該div，javascript代碼如何實現？

如何js彈出div

js如下:

script language=”javascript”

//登陸彈出對話框，並使背景元素不可用

var div_width = 300;

var div_height = 200;

function showWindow(width,height){

location.href=”#”;

width = div_width;

height = div_height

var windowstr= document.getElementById(“popLayer”).innerHTML;

document.getElementById(“infoDiv”).innerHTML=windowstr;

document.getElementById(“infoDiv”).style.left=((document.body.clientWidth-width)0?(document.body.clientWidth-width):0)/2+”px”;

document.getElementById(“infoDiv”).style.top=200+”px”;

document.getElementById(“infoDiv”).style.zIndex=10001;

document.getElementById(“infoDiv”).style.width=width;

document.getElementById(“infoDiv”).style.height=height;

document.getElementById(“infoDiv”).style.border=”3px solid #0099ff”;

document.getElementById(“tranDiv”).style.height=document.body.clientHeight+ “px”;

document.getElementById(“tranDiv”).style.width=document.body.clientWidth+ “px”;

document.getElementById(“tranDiv”).style.display=””;

document.getElementById(“tranDivBack”).style.display=””;

document.getElementById(“tranDivBack”).style.zIndex=10000;

document.getElementById(“infoDiv”).style.display=””;

}

function closeWindow(){

document.getElementById(“tranDiv”).style.display=”none”;

}

/script

頁面中：

!–層遮罩部分–

div style=”position:absolute;display:none; left:0px; top:0px;” id=”tranDiv”

div style=”position:absolute;left:0px; top:0px; width:100%; height:100%;background-color:#000000;filter:alpha(Opacity=30)” id=”tranDivBack” /div

div align=’center’style=’position:absolute;left:0px; top:0px; width:100%; height:100%; background-color:#e5edf5;background-image:url(images/bestnetqywimg/tccbg.gif);’ id=’infoDiv’/div

/div

!–層遮罩部分結束–

!–彈出層登錄–

div id=”popLayer” style=”display:none”form id=”formdl” name=”formdl” method=”post” action=””br /font align=”center” color=”#0000ff” size=”3″b—手機號碼先登錄—/b/fontbr /br /

br/

input type=”submit” name=”Submit” class=”bntccanniu” value=”登錄” / input type=”button” name=”Submit1″ class=”bntccanniu” value=”取消” onclick=”closeWindow();”/

/form

/div

a href=”javascript:;”點擊此處看看/a

js顯示和隱藏div如何修改

需要準備的材料分別有：電腦、html編輯器、瀏覽器。

1、首先，打開html編輯器，新建html文件，例如：index.html，編寫問題基礎代碼。

2、在index.html中的script標籤，輸入js代碼：$(‘button’).click(function () {$(‘#123’).css(‘display’, ‘block’);});。

3、瀏覽器運行index.html頁面，此時點擊btn按鈕後，div的內容成功被顯示了出來。

點擊按鈕彈出一個div，再點擊按鈕或點擊其他區域關閉該div，javascript代碼如何實現？

var 按鈕=document…;\x0d\x0avar div=document….;\x0d\x0a\x0d\x0a//點擊按鈕彈出div 在點擊按鈕關閉該div \x0d\x0a按鈕.onclick=function()\x0d\x0a{\x0d\x0aif(div.style.display==”none”)\x0d\x0a{\x0d\x0adiv.style.display=”block”;\x0d\x0a}\x0d\x0aelse\x0d\x0a{\x0d\x0adiv.style.display=”none”;\x0d\x0a}\x0d\x0a}\x0d\x0a\x0d\x0a//點擊其他地方關閉div\x0d\x0adocument.onclick=function()\x0d\x0a{\x0d\x0adiv.style.display=”none”;\x0d\x0a}\x0d\x0a\x0d\x0a//為了防止點擊div 也關閉div 所以這裡要防止冒泡\x0d\x0adiv.onclick=function()\x0d\x0a{\x0d\x0areturn false;\x0d\x0a}\x0d\x0a\x0d\x0a希望對你有所幫助