javascript - 非模态函数,警告出现在页面顶部的红色横幅中

标签 javascript html css alert

当我点击按钮时,我希望文本显示在网页顶部的红色横幅中。我查看了 google 和 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>

最佳答案

你是说这样?

你的代码大部分对我有用。您只需要为 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>

关于javascript - 非模态函数,警告出现在页面顶部的红色横幅中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27276902/

相关文章:

javascript - 动态生成表格后单击时难以调用 JavaScript 函数

javascript - 带有 AgeDifference 的 if 语句未正确计算最接近的年龄

html - 如何在 PHPStorm 中禁用 html 标记完成

javascript - NodeJS 变量未定义

javascript - React 函数式组件真的比类组件更轻量级吗?

javascript - getelementbyid 没有方法

jquery - float 元素的高度 100%

jquery - 从 TAB 跳转中跳过焦点

html - 如何使字段集 `display: block; overflow: auto` 显示滚动条?

html - 无法覆盖默认的 Bootstrap css