当前位置：首页 » 编程语言 » htmldiv弹出

htmldiv弹出

发布时间: 2021-03-20 19:38:46

⑴ 怎么制作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模拟实现模态窗口的弹出

⑼ jquery 点击标签弹出DIV

php我不知道怎么做，不知道和jsp是不是一样的，不会php

1、在jsp中，你用jquery或者javascript非常好实现，当点击性别时，点击就是个事件，这个事件所要做的事情就是显示一个男女的DIV

2、当在男女的DIV上选择了性别后，隐藏这个div，并且在性别那显示我们所选择的性别男或女，我可以可以在隐藏的时候，把选择的那个男或者女赋

值给性别DIV中的性别那一栏

3、学习下jqeury或者javascript实现起来超容易

4、下面是我写的js代码，你看你php能否同样做出来，按照这个方法

<!DOCTYPE>

<html>

<head>

<title>title</title>

</head>

<body>

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

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

</div>

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>

阅读全文

htmldiv弹出

与htmldiv弹出相关的阅读推荐