2016-11-27 69 views
0

我已經通過2個與彈出窗口中使用html和javascript類似項目的網絡相關的類,但問題是彈出窗口根本不會顯示或顯示半秒和立即關閉自己。我不能發佈整個代碼,但這裏的代碼粗塊(我把劇本在文件的最底部,HTML標記外):使用javascript彈出窗口不能正常顯示

<script type="text/javascript"> 
 
\t var popup = document.getElementById('popup'); 
 
\t var btn = document.getElementById('btn_popup'); 
 
\t var close = document.getElementById('close'); 
 

 
\t btn.onclick = function(){ 
 
\t \t popup.style.display = "block"; 
 
\t } 
 
\t close.onclick = function(){ 
 
\t \t popup.style.display = "none"; 
 
\t } 
 
</script>
<html> 
 
    <body> 
 
    <div id="titleBar"> 
 
\t \t <h2>Title</h2> 
 
\t \t <div> 
 
\t \t \t <form action="page.php" method="get"> 
 
\t \t \t \t <input type="text" name="item"> by 
 
\t \t \t \t <select name="search"> 
 
\t \t \t \t \t <option value="v1">Value 1</option> 
 
\t \t \t \t \t <option value="v2">Value 2</option> 
 
\t \t \t \t \t <option value="v3">Value 3</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t <input type="submit" value="SEARCH"> 
 
\t \t \t \t <button id="btn_popup">Popup Button</button> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div id="popup"> 
 
\t \t <div id="popup_content"> 
 
\t \t \t <header> 
 
\t \t \t \t <span id="close">X</span> 
 
\t \t \t \t <p>Popup Form</p><br> 
 
\t \t \t </header> 
 
\t \t \t <article> 
 
\t \t \t \t <div> 
 
\t \t \t \t \t <form method="POST" action="page.php"> 
 
\t \t \t \t \t \t <input type="text" name="n1" placeholder="N1"> 
 
\t \t \t \t \t \t <input type="text" name="n2" placeholder="N2"> 
 
\t \t \t \t \t \t <input type="text" name="n3" placeholder="N3"> 
 
\t \t \t \t \t \t <input type="text" name="n4" placeholder="N4"><br> 
 
\t \t \t \t \t \t <select name="list"> 
 
\t \t \t \t \t \t \t <option value="">Select One</option> 
 
\t \t \t \t \t \t \t <?php 
 
\t \t \t \t \t \t \t \t //code to generate options 
 
\t \t \t \t \t \t \t ?> 
 
\t \t \t \t \t \t </select><br> 
 
\t \t \t \t \t \t <input type="submit" value="Click"> 
 
\t \t \t \t \t </form> 
 
\t \t \t \t </div> 
 
\t \t \t </article> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

我複製這些來自其他頁面的代碼部分,但他們不再在這個頁面上工作,但他們在上一頁上工作沒有任何問題。我也使用PHP來生成彈出窗體中的下拉列表。在上一頁中,彈出窗口顯示爲應該顯示,但在此頁面中,彈出窗口僅顯示半秒鐘,然後單獨關閉。

有沒有解決這個問題?或者至少有任何關於這個問題的線索?並且請不要推薦我使用框架(除了w3,而不是w3模塊)來解決這個問題。我正在使用最新的Google Chrome瀏覽器查看這些文件,這些文件也已經在Mozilla上試用過,但也給出了相同的結果。

回答

0

的問題是這樣的:

<form action="page.php" method="get"> 

導致page.php文件的負載,當你點擊按鈕。

原因是按鈕標籤的默認「類型」是「提交」。

只需添加類型=「按鈕」:

<button type="button" id="btn_popup">Popup Button</button> 
0

但問題是,要麼彈出不會在所有或顯示顯示半秒,並立即關閉本身。

這是因爲一旦你點擊了彈出按鈕,表單就會被提交。

保持您的彈出式按鈕不在窗體中,否則您必須處理防止事件。

<form> 
    //your code 
</form> 
<button id="btn_popup">Popup Button</button> 

我創建了一個小提琴,請檢查一次

https://jsfiddle.net/ponrajpaul/42g9bk3c/