![](/img/trans.png)
[英]how to prevent javascript div popup from jumping back to the top of the page?
[英]how to prevent css div popup from jumping back to the top of the page
我對JS並不很精通,但是我試圖將一個簡單的學校投資組合站點與一個黑色透明div一起用作燈箱。 我正在使用CSS和JS切換此div,但是在長滾動頁面上,打開時它會跳到頂部。 這是我的CSS:
<style type="text/css">
div.transbox{
width:100%;
height:100%;
margin:0px 0px;
position:fixed;
background-color:#000000;
background:rgba(0,0,0,0.75);
z-index:99;
}
p.ptransbox{
width:400px;
padding:5px;
position:relative;
background:rgba(255,255,255,0.5);
color:#000;
border-radius:5px;
}
img.itransbox{
padding:10px;
position:relative;
background:rgba(255,255,255,0.5);
border-radius:5px;
}
這是JS:
var toggle2 = function() {
var mydiv = document.getElementById('02');
if (mydiv.style.display === 'none' || mydiv.style.display === '')
mydiv.style.display = 'block';
else
mydiv.style.display = 'none'
}
這是可立即作為打開div的鏈接(打開)的代碼:
<td style="float:left; width: 33%" class="school">
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">
<img src="images/thumbs/chair.png" id="Image2" /></a>
這是啟用“燈箱”的代碼,並具有將其關閉的選項:
<a href="#" onclick="toggle2();">
<div align="center" id="02" class="transbox" style="display: none;">
<p><img class="itransbox" src="images/anti-thumbs/chair.jpg" /></p>
<p class="ptransbox"><strong>Wörner Hall</strong>, 2010</p></div></a>
請忽略所有標題,替代或僅針對內容的任何內容。 您可以在此處查看我的投資組合的運行情況: http : //www.student.nvcc.edu/home/majeffers3/並且,如果您注意到滾動到底部並單擊某個項目,它會將您跳到頂部。 我已經潛伏了很長時間,這是我第一次發布問題,因為我似乎找不到解決方案。 非常感謝您的幫助!
單擊鏈接時,您需要阻止默認操作。 最簡單的方法是從onclick
處理程序返回false
:
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2(); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">
請從href="#"
更改為href="javascript:;"
。 單擊時只需轉到“#”鏈接。
確保從onclick處理程序返回false。 如果不這樣做,則將啟動超鏈接的默認操作,這意味着您將導航到#,這表示當前頁面的頂部。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.