如何動態顯示div ? 更改div內容 - .NET - 提供最全面實用的Java面試題,...

yfm10 2010-01-14

展開全文

開始寫.net 很多地方不明白，請教了

現在有一個repearter，其中一列本來是一個鏈接，url后面跟了個id的參數，點擊后出現一個新窗口顯示點東西,比較容易

現在需要彈出一個div來顯示內容不能刷新頁面，我就沒轍了，不知道如何解決，發現有的說div里嵌套iframe，有的說xml。。。

反正都不會~請教了

http://topic.csdn.net/u/20080226/14/b2b42796-910d-42a3-81e5-a28bd6103ee4.html
參照這個改一下吧

<a href="#" onclick="javascript:ShowDiv(3,event);">click </a>

JScript code

  var gFrame = null;
function ShowDiv(id,evt)
{
if(gFrame == null)
{
gFrame = document.createElement("IFRAME");
document.body.appendChild(gFrame);
gFrame.style.position = "absolute";
gFrame.style.zIndex = 1000;
}
gFrame.src = "b.aspx?id="+id
gFrame.style.left = evt.x;
gFrame.style.top = evt.y
gFrame.style.display = "";
}

多謝多謝，頂頂~

忘了說一點，這個彈出來的東東頂部還要有一個xx的圖片，點了后將這個div撤銷掉不顯示
如果是用dom生成iframe的話，是不是這個地方不太好弄？思路一片混亂！

傳id基本明白了，是不是把綁定的id那列作為javascript函數的參數傳出去就行了？

艾，以前從來不寫前臺的，現在痛苦死

div_msg.style.visibility="visible";
div_msg.style.visibility="hidden";

<div id="detail">
<div id="toolbar" style="cursor: pointer;" onmousedown="down(event)" onmouseup="up();"
onmousemove="move(event)">
<span id="wintitle" style="float: left;"> </span> <span style="float: right; padding-top: 5px;
padding-right: 5px;"> <a href="javascript:void(0)">
<img alt="點擊關閉" src="images/x.gif" width="16" height="15" id="img_colse" border="0"
onclick="MM_showHideLayers('detail',false)" /> </a> </span> <span style="clear: both;">
</span>
</div>
<div id="content">
<iframe scrolling="auto" id="ifContent" name="ifContent" height="320px" width="100%"
style="border-style: outset; border-width: 0px;"> </iframe>
</div>
</div>

<script type="text/javascript">
var flag=false;
var x_start=0;
var y_start=0;
function move(e)
{
if(flag)
{
var src = e.srcElement || e.target;
if(src.id=="img_colse")
{
flag=false;
return false;
}
var obj=document.getElementById("detail");
if(e.offsetX)
{
obj.style.left=parseInt(e.clientX-x_start-2) + "px";
obj.style.top=parseInt(e.clientY-y_start-2) + "px";
}
else
{
// obj.style.left=parseInt(e.clientX- top.leftFrame.document.width -x_start-2) + "px";
// obj.style.top=parseInt(e.clientY - top.topFrame.document.height -y_start-2) + "px";
}
// var spanObj=document.getElementById("mInfo");
// spanObj.innerHTML="e.clientX:" + e.clientX;
// spanObj.innerHTML+="e.offsetX:" + e.offsetX;
// spanObj.innerHTML+="e.clientX-e.offsetX:" + (e.clientX-e.offsetX);
}
}
function down(e)
{
flag=true;
if(e.offsetX)
{
x_start=e.offsetX;
y_start=e.offsetY;
}
else
{
x_start=e.clientX - top.leftFrame.document.width;
y_start=e.clientY - top.topFrame.document.height;
}
var obj=document.getElementById("toolbar");
obj.style.cursor = "move";

}
function up()
{
flag = false;
x_start=0;
y_start=0;
var obj=document.getElementById("toolbar");
obj.style.cursor = "pointer";
}
function MM_showHideLayers(id,v,param,e) { //v6.0
var obj = document.getElementById(id);
if(e)
{
obj.style.left = parseInt(document.documentElement.clientWidth/2-150) + "px";
obj.style.top = parseInt(document.documentElement.clientHeight/2-150 ) + "px";
}
if(obj)
{
if(v)
{
obj.style.display="block";
document.getElementById("wintitle").innerHTML="業務詳情";
if(document.getElementById("ifContent")!=null)
document.getElementById("ifContent").src="ShowDetail.aspx?id="+param;
}
else
{
ifContent.document.write("請稍候，數據正在載入中。。。");
ifContent.document.close();
//document.frames["ifContent"].document.write("請稍候，數據正在載入中。。。");
obj.style.display="none";
document.getElementById("ifContent").setAttribute("height","220");

}
}
}
</script>

調用showHideLayers函數來顯示
里面關于firefox下，浮動的代碼還沒寫好。在IE下沒問題

div里嵌套iframe,這個方法可以。不會刷新頁面
你去下個jquery庫，在下個thickbox，即可實現。

不能用別的庫啊，寫了10年的代碼沒文檔，我現在都不知道如何入手

可以在div中用iframe來顯示新窗口頁面,再控制iframe是否顯示頁面.代碼如下:

主頁面

HTML code


<html xmlns="http://www./1999/xhtml" >
<head runat="server">
<title>未命名頁面</title>
<script type="text/javascript" language="javascript">
function ShowPage()
{
document.getElementById('iframe1').style.display = 'block';
window.event.returnValue=false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:LinkButton ID="LinkButton1" OnClientClick="ShowPage()" runat="server">ShowPage</asp:LinkButton>
<div id="div1">
<iframe id="iframe1" src="popPage.aspx" style="height:600px;width:750px;display:none;"></iframe>
</div>
</form>
</body>
</html>

新窗口頁面

HTML code


<html xmlns="http://www./1999/xhtml" >
<head runat="server">
<title>未命名頁面</title>
<script type="text/javascript" language="javascript">
function ClosePage()
{
window.parent.document.getElementById('iframe1').style.display="none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="Image/P2P_1.jpg" onclick="ClosePage()" style="cursor: hand" />
</div>
</form>
</body>
</html>

5樓的兄弟，這個不用設z-index嗎？
如果不顯示的時候應該沒問題，但是如果現實的時候，不設置z-index到底這個div和其他元素誰會顯示出來
我是需要這個div蓋過其他東西的

看看...

學習

引用 9 樓 warcraftpao 的回復:
5樓的兄弟，這個不用設z-index嗎？
如果不顯示的時候應該沒問題，但是如果現實的時候，不設置z-index到底這個div和其他元素誰會顯示出來
我是需要這個div蓋過其他東西的

如果后面的層不是順序輸出，而是設置了z-index的話，那你就給它隨便設置個比較大的就可了。

如果后面的層是順序輸出，沒有設置z-index的話，就這樣就OK。這是我從我項目中直接復制出來的，一直沒問題的。

document.getElementById('id').innerHTML="this is test";

你首先把div顯示的腳本寫出來，然后把要動態顯示的值當作參數，寫成一個腳本function

在綁定repeater的時候，在row綁定的時候，給linkbutton.Attributes.Add("onclick", "javascript:方法;");

這樣就可以解決你的動態div的問題

div 里放 iframe

學習

補遺:
clientX 設置或獲取鼠標指針位置相對于窗口客戶區域的 x 坐標，其中客戶區域不包括窗口自身的控件和滾動條。
clientY 設置或獲取鼠標指針位置相對于窗口客戶區域的 y 坐標，其中客戶區域不包括窗口自身的控件和滾動條。

offsetX 設置或獲取鼠標指針位置相對于觸發事件的對象的 x 坐標。
offsetY 設置或獲取鼠標指針位置相對于觸發事件的對象的 y 坐標。

screenX 設置或獲取獲取鼠標指針位置相對于用戶屏幕的 x 坐標。
screenY 設置或獲取鼠標指針位置相對于用戶屏幕的 y 坐標。

x 設置或獲取鼠標指針位置相對于父文檔的 x 像素坐標。
y 設置或獲取鼠標指針位置相對于父文檔的 y 像素坐標。

你怎么改的告訴我啊