非模態功能，警報出現在紅色橫幅頁面的頂部

當我點擊按鈕時，我希望文本顯示在網頁的頂部，在紅色的橫幅中。我已經看過谷歌和YouTube，無法在任何地方找到解決方案。如果任何人都可以看看我的代碼，看看我可以如何使這項工作，請！非模態功能，警報出現在紅色橫幅頁面的頂部

<html> 


<head> 

<title> Non-Modal Alert Messages</title> 


         <link rel="stylesheet" type="text/css" href="nonmodal1.css"> 


       <script type = "text/javascript"> 



            function reveal(){ 


            document.getElementById('theDiv').innerHTML='You have touched the button!'} 

            function hide(){ 
            document.getElementById('theDiv').innerHTML='' } 



    </script> 

</head> 






      <body> 



        <form> 

<input type = "button" onclick = "reveal()" value = "Button"> 

<input type = "button" onclick = "hide()" value = "Close Alert"> 
</form> 


<div id = "theDiv"> 

</div> 

</body> 




<html>

來源

2014-12-03 MysteryX

您的意思是這樣的？

您的代碼主要適用於我。您只需要爲div添加樣式信息，並將其放在DOM層次結構中，以使其顯示在頂部。除此之外，還有其他一些處理方式可能更適合，比如對div使用靜態定位，所以它總是位於窗口的頂部，並在需要顯示時切換其可見性。

<html> 
<head> 

    <title> Non-Modal Alert Messages</title> 
    <link rel="stylesheet" type="text/css" href="nonmodal1.css"> 


    <script type="text/javascript"> 
     function reveal() { 
      document.getElementById('theDiv').innerHTML = 'You have touched the button!' 
     } 

     function hide() { 
      document.getElementById('theDiv').innerHTML = '' 
     } 
    </script> 

</head> 
<body> 
    <div id="theDiv" style="background-color: red; color: white;"> 
    </div> 

    <form> 
     <input type="button" onclick="reveal()" value="Button"> 
     <input type="button" onclick="hide()" value="Close Alert"> 
    </form> 
</body>

來源

2014-12-03 16:50:02

非模態功能，警報出現在紅色橫幅頁面的頂部

回答

相關問題