小弟求一个DIV弹出的 代码
比如有一个 图片上传的按钮
点击一下 弹出了一个 DIV 里面可以放很多 按钮 和 确定 和取消的功能
听说好像 JS也可以达到？
大家如果有 JS 或者是 DIV的 都可以 给我 谢谢了 小弟 太菜
比如有一个 图片上传的按钮
点击一下 弹出了一个 DIV 里面可以放很多 按钮 和 确定 和取消的功能
听说好像 JS也可以达到？
大家如果有 JS 或者是 DIV的 都可以 给我 谢谢了 小弟 太菜
但是里面可以放按钮的那种
就是通过 divid.style.display="none"和divid.style.display=""转换来实现
<!--内容
-->
</div>
直接弹一个子窗体咯
window.showModalDialog('XXXX.aspx','','dialogLeft:?;dialogtop:?;dialogwidth:?px;dialogheight:?px;status=0;scroll=0'')
{
obj=document.getElementById(div1);
obj.style.display=obj.style.display=='block'?'none':'block';
}
是不是要这个两个窗体传值的效果？去看看吧
<div id='div1'>
中间放你要放的按钮，框
比如<input type=button>之类的
</div>
然后用我上面那个代码，显示隐藏这个框不就有那个效果了
<html>
<head>
</head>
<body>
<a href="1.htm" onmouseover="sAlert('hello');" >Hi move here</a>
<script type="text/javascript" language="javascript">
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//Width
msgh=100;//Height
titleheight=25 //title Height
bordercolor="#336699";//boder color
titlecolor="#99CCFF";//title color
var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="Close";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
</body>
</html>
<head>
<title>是不是这样啊</title> <script type="text/javascript">
function divshow()
{
var div1 = document.getElementById("ddiv1");
div1.style.display=div1.style.display=="none"?"block":"none";
}
</script></head>
<body>
<input id="Button1" type="button" value="button" onclick="divshow()" />
<div id="ddiv1" style="display: none;background-color: Blue; width: 100px; height: 100px">
</div>
</body>
</html>
<head>
</head>
<body>
在这里写入你要弹出DIV里面的内容，可为HTML：<input id="strHtml" name="strHtml" /><input type="button" name="btn" id="btn" onclick="openDiv(document.getElementById('strHtml').value)" value="点我"/>
<script type="text/javascript" language="javascript">
function openDiv(sHtml){
sHtml.replace('"','\'');
sAlert(sHtml);
}function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//Width
msgh=100;//Height
titleheight=25 //title Height
bordercolor="#336699";//boder color
titlecolor="#99CCFF";//title color
var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="Close";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
</body>
</html>
<head>
<script>
var shield;
function shideBody()
{
shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = document.documentElement.scrollHeight+"px";
shield.style.background = "#333333";
shield.style.textAlign = "center";
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=0)";
shield.style.opacity = 0;
document.body.appendChild(shield);
this.setOpacity = function(obj,opacity){
if(opacity>=1)opacity=opacity/100;
try{ obj.style.opacity=opacity; }catch(e){}
try{
if(obj.filters.length>0 && obj.filters("alpha")){
obj.filters("alpha").opacity=opacity*150;
}else{
obj.style.filter="alpha(opacity=\""+(opacity*150)+"\")";
}
}catch(e){}
}
var c = 0;
this.doAlpha = function(){
if (++c > 20){clearInterval(ad);return 0;}
setOpacity(shield,c);
}
var ad = setInterval("doAlpha()",1); document.getElementById("divh").style.display = "";
document.getElementById("divh").style.marginLeft = "-200px";
document.getElementById("divh").style.marginTop = -75+document.documentElement.scrollTop + "px";
}
function showdiv()
{
shideBody();
var text = "在这里输入你要显示在层里的内容（html）";
document.getElementById("divh").innerHTML = text;
}
function hidediv()
{
if(shield){
document.body.removeChild(shield);
shield = null;
}
document.getElementById("divh").innerHTML = "";
document.getElementById("divh").style.display = "none";
}
</script>
</head>
<body>
<div id='divh' style="position: absolute; display: none;"></div>
<input type="button" value="弹出层" onclick="showdiv()"/>
<input type="button" value="关闭层" onclick="hidediv()"/>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
INNERHTML="";里面不能写 HTML代码？ 写了 什么都不显示哈
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style type='text/css'>
#UpFileDiv
{
width:100%;
height:100%;
position:absolute;
filter:alpha(opacity=70);
opacity:0.7;
display:none;
background-color:#666666;
z-index:10;
left:expression(this.offsetParent.scrollLeft);
top:expression(this.offsetParent.scrollTop);
}
#form1
{
display:none;
position:absolute;
margin:3px;
background-color:White;
width:300px;
opactiy:1;
filter:alpha(opacity=100);
left:expression(this.offsetParent.scrollLeft+(this.offsetParent.clientWidth-this.offsetHeight)/2);
top:expression(this.offsetParent.scrollTop+(this.offsetParent.clientHeight-this.offsetWidth)/2);
z-index:100;
}
</style>
</head>
<body style="margin:0px">
<script type="text/javascript">
function $(Id){return document.getElementById(Id);}
function ShowUp(display)
{
$("UpFileDiv").style.display=display;
$("form1").style.display=display;}window.onload=function()
{
if(!document.all)//ff不支持css的expression..
{
var f=$("form1");
f.style.left=document.body.scrollLeft+(document.body.clientHeight-f.offsetHeight)/2;
f.style.top=document.body.scrollTop+(document.body.clientWidth-f.offsetWidth)/2;
var div=$("UpFileDiv");
div.style.left=div.style.top="0px";
}
}
</script><br /> <br /> <br /> <br />
<input type="button" onclick="ShowUp('block');" value="上传图片" />
<div id="UpFileDiv"><!--Mark--->
<script type="text/javascript">
if(document.all)//for ie6-
{
var version=parseInt(navigator.appVersion.match(/msie ([^;]+);?/i)[1]);
if(version<7)
{
document.write('<iframe src="" style="position:absolute; visibility:inherit;top:0px;'
+' left:0px; width:100%; height:100%; z-index:-1; '
+'filter=\'alpha(style=0,opacity=0)\';"></iframe>');
}
}
</script>
</div>
<form method="post" id="form1"><!----上传需要的html代码放这里面----->
<input type="file" runat="server" id="file1" /><br />
<input type="submit" value="上传"/> <input type="button" onclick="ShowUp('none');" value="取消"/>
</form>
<br /> <br /> <br /> <br /> <br /> <br /><select></select> <br />1 <br />3 <br /><br /> <select></select><br /> <br /> <br /> <br /> <br /> <br />1 <br />3 <br />
<br /> <br /> <br /> <br /> <br /> <br /> <br />1 <br />3 <br /><br /> <br /> <br /> <br /> <br /> <br /> <br />1 <br />3 <br />
</body>
</html>
$(function(){
$("body").prepend("<div id='replace' style='display:none; background-color:#eee; height:100px; width:100px; position:absolute; z-index:2;' ><button type='text' >我可以放更多东东</button></div>");
$("#run1").click(function(){
$("#replace").fadeIn("slow").show();
});
});
$(function(){
$("body").prepend("<div id='replace' style='display:none; background-color:#eee; height:100px; width:100px; position:absolute; z-index:2;' ><input type='submit' value='提交' /><input type='submit' value='取消' /></div>");
$("#run1").click(function(){
$("#replace").fadeIn("slow").show();
});
});你想要什么效果？？？？？？？
$("body").prepend("<div id='replace' style='text-align:center; display:none; background-color:#eee; height:250px; width:300px; position:absolute; z-index:2;' ><div style='height:200px;'></div><input type='submit' value='提交' /> <input type='submit' value='取消' /></div>");
$("#run1").click(function(){
$("#replace").fadeIn("slow").show();
});
});测试了下 ie ff都支持 里面要怎么布局 自己去设计下
你不会让别人都跟你做出来把？？？？？
function showpic()
{
document.getElementById("div1").innerHTML="<img src='"+document.all.imgfile.value+"' style='width:100px; height:100px;' />"
}
</script>
</head><body>
<form id="form1" runat="server">
<input name="imgfile" type="file" id="imgfile" onchange="showpic()"/>
<div id="div1"></div>
确定取消就用不着了 , 只要重新选定新的图片,自然就将新得图片取消了.