Non-Modal functionalities, an alert displayed prominently in a vibrant red bar at the top of the screen

Is there a way to make the text show up at the top of the webpage in a red banner when the button is clicked? I've searched on Google and YouTube but haven't found a solution. Could someone please take a look at my code to help me figure this out?

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

Answer №1

Is this what you had in mind?

Your current code seems to be functioning for me, with a few tweaks. You'll want to include style information for the div element and ensure it's placed at the top of the DOM hierarchy for it to appear at the top of the page. Alternatively, you could explore other solutions like utilizing static positioning to keep the div at the top of the window and toggling its visibility as needed.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with making JSON.parse() function properly in a Discord Bot

I have a separate JSON file connected like this const Players = require('./Database/Players.json'); and a parser that handles the code client.on('message', message => { if (message.content.toLowerCase() ==='smack activate ...

Limitless scrolling functionality in asp.net

I attempted to implement an infinite scroll feature using a WebMethod, but I keep receiving a "failed" message. After reviewing my code, I couldn't identify any errors. Below is the code snippet: Code Behind: public int CurrentPage { get ...

Avoid making the check mark disappear in an SVG animation

After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears. The reason for the disappearing ...

Transforming XML into Json using HTML string information in angular 8

I am currently facing a challenge with converting an XML document to JSON. The issue arises when some of the string fields within the XML contain HTML tags. Here is how the original XML looks: <title> <html> <p>test</p> ...

Value-based JavaScript object prototype

Is there a way to ensure that every new object I create has its own unique dataTransfer property? For instance, when I try something like Object.prototype.dataTransfer = new DataTransfer();, I want a.dataTransfer.prop to remain 1 even if b.dataTransfer.pro ...

The declaration file for the module 'react-tilt' was not located

After following the installation and import steps for react-tilt as outlined in this guide, I encountered the following error message and am unable to utilize it. I'm uncertain about what the message implies. Is there anyone who can help me resolve th ...

Managing User Feedback with Ajax, JQuery, and PHP

Imagine you're using ajax to send data. The server processes it (in PHP) and sends back a response that can be captured with complete: function(data) { //WRITE HTML TO DIV $('#somehing').html(data) } The big question is: how can you modify ...

Creating an HTML hyperlink to a file

I've been attempting to connect a blog post I saved previously to my new website, but so far I have not been successful in getting them to display. It keeps showing up as file not found. Is there something I am missing? My past blog posts are stored i ...

Abort S3 file upload using ASW-SDK

Is there a way to abort an upload without raising an error Upload aborted. when calling upload.abort()? import { PutObjectCommandInput, S3Client } from '@aws-sdk/client-s3'; import { Progress, Upload } from "@aws-sdk/lib-storage"; cons ...

Creating a CSS grid layout with an unspecified number of columns all set to equal width

Currently, I am in the process of designing a navigation bar using grids. In essence, when the user is an admin, there should be two additional links at the end of the bar. These links need to have the same width and should not be affected by the amount of ...

Module for managing optional arguments in Node.js applications

I'm on the hunt for a Node.js module that can effectively manage and assign optional arguments. Let's consider a function signature like this: function foo(desc, opts, cb, extra, writable) { "desc" and "cb" are mandatory, while everything else ...

Issue with JQueryUI Dialog auto width not accounting for vertical scrollbar

My JQueryUI Dialog has the width property set to 'auto'. Everything functions properly except in situations where the content exceeds the height of the dialog: A vertical scrollbar appears, but it disrupts the layout of the content within the dia ...

After upgrading to version 4.0.0 of typescript-eslint/parser, why is eslint having trouble recognizing JSX or certain react @types as undefined?"

In a large project built with ReactJs, the eslint rules are based on this specific eslint configuration: const DONT_WARN_CI = process.env.NODE_ENV === 'production' ? 0 : 1 module.exports = { ... After upgrading the library "@typescript-es ...

Error message: "Issue encountered with locating Node import module while operating within a docker

I've created a React app along with a Node.js server that includes the following imports: import express from 'express' import compression from 'compression' import cookieParser from 'cookie-parser' import bodyParser from ...

How can I shift an element without adjusting the padding to prevent border or margin collapse?

Is there a way to move HTML elements without the use of padding, as I need a border for color and want to avoid collapsing with other elements in the structure? Or is this the only option and should I just avoid colliding with other elements? "Margin is t ...

Develop a responsive design for a row of icons that automatically flows to a second line when the screen size is

Currently, I am utilizing Bootstrap 4 and attempting to design a row of 12 icons that are responsive. <div class="app-container"> <div class="row"> <div class="col-md-1"> <a class="" href="https://www.xxx.org.au"> < ...

Challenges faced when subscribing to global events in JavaScript

I have some questions about the JavaScript code snippet below: What does .events.slice(-1)[0][0] signify? Similarly, could you explain the purpose of nodes_params += "&ns=" + GLOBAL_EVENT + "," + start_from + ",-,-";? Could you elaborate on what is m ...

Obtaining a specific item from a group using AngularJS. Utilizing a declarative method

Consider a scenario where you need to apply a CSS rule to a specific element within a collection that needs to be selected. <div ng-repeat="fragments" ng-click="makeSelected()"></div> $scope.fragments = [ {id: 6379, someProperty: "someValu ...

.eslintignore not functioning as intended

Recently, I started working on a Vue template project that includes ESLint. However, I found that I wanted to disable ESLint for some reason. To do this, I followed the recommended steps and created a file with the following content: **/*.js This file wa ...

What is the best way to animate a three.js object to the right using GSAP without obstructing the surrounding HTML text?

As a newcomer to web design, I seek forgiveness if my question appears basic. I am working on an animated object in three.js that I want to move to the left side of the screen using GSAP. Additionally, I have a text "Hello" on the left side of the screen. ...