文章/答案/技术大牛

发布

社区首页 >问答首页 >非模态功能，警告以红色横幅显示在页面顶部

问非模态功能，警告以红色横幅显示在页面顶部
EN

Stack Overflow用户

提问于 2014-12-04 00:34:40

回答 1查看 238关注 0票数 1

当我点击按钮时，我希望文本显示在网页的顶部，在红色的横幅中。我已经在谷歌和youtube上找过了，但没有找到一个解决方案anywhere.If任何人都可以看看我的代码，看看我如何才能做到这一点！

<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>

javascript

html

css

alert

回答 1

Stack Overflow用户

发布于 2014-12-04 00:50:03

你是说像这样吗？

你的代码在很大程度上适用于我。您只需要为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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27276902

复制

相似问题

问非模态功能，警告以红色横幅显示在页面顶部
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问非模态功能，警告以红色横幅显示在页面顶部EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问非模态功能，警告以红色横幅显示在页面顶部
EN