非模态功能，警报出现在红色横幅页面的顶部

当我点击按钮时，我希望文本显示在网页的顶部，在红色的横幅中。我已经看过谷歌和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

非模态功能，警报出现在红色横幅页面的顶部

回答

相关问题