⑴ 怎麼製作div彈出窗體

這個是代碼,全部復制,測試了的,可以實現。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript">
function hide(id)
{
var ids=document.getElementById(id);
ids.style.visibility='hidden';
}
function show(ids)
{
var idss=document.getElementById(ids);
idss.style.visibility='visible';
}
</script>
</head>

<body style=" text-align:center;">
<div id="csss" style=" margin:0px auto; background-color:#CCCCCC; width:300px; height:100px; line-height:100px;">這裡面填寫內容</div>
<div onclick="show('csss')" style=" margin:0px auto; width:100px; margin-top:10px; cursor:hand; height:30px; border:2px #999999 outset; line-height:30px; background-color:#999999;">點擊彈出div</div>
<div onclick="hide('csss')" style=" margin:0px auto; width:100px; margin-top:10px; cursor:hand; height:30px; border:2px #999999 outset; line-height:30px;background-color:#999999;">點擊關閉div</div>
</body>
</html>

⑵ 如何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></font><br /><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>

⑶ 點擊彈出div的內容

這個很簡單啊 ,是有關Dom的知識
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<style type="text/css">
#fdiv{
cursor: pointer;
}
</style>
</head>
<body>
<div id="fdiv" onclick="show()">點擊我產生Hello,JS!</div>
</body>
<script type="text/javascript">

function show(){

var obj=document.getElementById("fdiv");
var obj2=obj.innerHTML;
alert(obj2);
}
</script>
</html>

⑷ HTML彈出的DIV怎麼設置點擊關閉

加一個*的a標簽,設置id,然後店家標簽的時候讓div的display為none就好的;版例如:
<div id='one'>
<a id='close'>×</a>

</div>
js部分權:
$('#close').click(function(){
$('#one').css('display','none');

});

⑸ html如何用JS自動彈出一個DIV

也就先做一個DIV。裡面的內容都做好。
此DIV背後加一個mask層。
把這個DIv默認設置為隱藏。
JS里加一個定時器,每隔一分鍾,設置為這個DIv的css樣式中的display=block

⑹ jquery 實現DIV的彈出

$(function(){
//點擊按鈕,DIV彈出隱藏
$('#btn1').toggle(function(){
$('#div1').show();
},function(){
$('#div1').hide();
});

//點擊按鈕,DIV彈出,點擊body任意地方隱藏div
$('#btn2').click(function(){
if(event&&event.stopPropagation){
//thiscodeisforMozillaandOpera
event.stopPropagation();
}
elseif(window.event){
//thiscodeisforIE
window.event.cancelBubble=true;
}
$('#div2').show();
});
$(document).click(function(){
$('#div2').hide();
});
});

以上都必須要基於,div的css是合理的。

其中event.stopPropagation(); 和window.event.cancelBubble = true; 是阻止事件冒泡的寫法,建議自行網路學習。


css:(這里用了fixed,不考慮兼容性)

/*水平垂直居中的div*/
#div1,#div2{
position:fixed;
top:50%;
left:50%;
background:red;
width:100px;
height:100px;
margin:-50px00-50px;
display:none;
}


同樣的功能有很多插件,例如fancybox,fancyzoom等

⑺ 點擊按鈕彈出一個DIV

document.all 是IE才能識別的,firefox是不支持的,你可以改成用id來獲取,如下:

<input type="button" onclick="document.getElementById('div').style.display=(document.getElementById('div').style.display=='none')?'':'none'" value="button" />

<div id="div" style="width: 300px;border: 1px dashed #CCCCCC;background-color: #FFFFCC; display:none">this is a div!</div>

改一下就OK了!

建議你以後不要再用document.all了,只有IE才支持...

⑻ HTML中如何用DIV+CSS+javascript模擬實現模態窗口的彈出

<style type="text/css">
<!--
#ap {
position:absolute;
z-index:1; left: 400px;
top: 140px;
background-color: #DAF5FC;
border: 1px solid #00CCFF;
display:none;
}
#qp{
position:absolute;
z-index:1;
filter:alpha(opacity=60);
width:100%;
height:100%;
background-color: #eeeeee;
display:none;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<div id="qp"></div>
<div id="ap">
<div align="right" style="background-color:#0099CC">
<a href="javascript:" onclick="closediv();">關閉</a>
</div>
</div>
<p>
<input type="button" onclick="acdiv();" value="確定" />
<p>
<p>
<script language="javascript">
i=1;
function acdiv()
{
qp.style.display='block';
ap.style.display='block';
if(i<15){
i++;
ap.style.width=2*i*i;
ap.style.height=1.1*i*i;
ap.style.left=20*i;
ap.style.top=10*i;
var timer = setTimeout("acdiv()",1);
}

}
function closediv()
{
ap.style.display='none';
qp.style.display='none';
i=0;
} </script>
這是我自已寫的

⑼ jquery 點擊標簽彈出DIV

php我不知道怎麼做,不知道和jsp是不是一樣的,不會php

1、在jsp中,你用jquery或者javascript非常好實現,當點擊性別時,點擊就是個事件,這個事件所要做的事情就是顯示一個男女的DIV

2、當在男女的DIV上選擇了性別後,隱藏這個div,並且在性別那顯示我們所選擇的性別男或女,我可以可以在隱藏的時候,把選擇的那個男或者女賦

值給性別DIV中的性別那一欄

3、學習下jqeury或者javascript實現起來超容易


4、下面是我寫的js代碼,你看你php能否同樣做出來,按照這個方法



<!DOCTYPE>

<html>

<head>

<!-- 聲明當前頁面的編碼集charset=gbk中文編碼gb2312,charset=utf-8國際編碼 -->

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

<!-- 當前頁面三要素 -->

<title>title</title>

<meta name="Author" content="cn.huanghaiping">

<meta name="Keywords" content="關鍵詞,關鍵詞">

<meta name="Description" content="描述">

<!-- css , js -->

</head>

<body>


<div><input type="text" id="sextxt"><input type="button" value="性別" id="sex" onclick="showsex()"></div>



<div id="sexradio" style="margin-top:10px;display:none;">

<input type="radio" name="sex" value="男" onclick="selectsex(this)"> 男

<input type="radio" name="sex" value="女" onclick="selectsex(this)"> 女

</div>


<script>

function showsex(){

document.getElementById("sexradio").style.display = "block";

}


function selectsex(o){

document.getElementById("sextxt").value = o.value

document.getElementById("sexradio").style.display = "none";

}


</script>

</body>

</html>