Alert appearing on screen with an option to dismiss it by clicking a button

I would like to implement an "X" button in the top right corner of the message so that users can easily close it. I could really use some assistance with this as my JavaScript skills are a bit lacking.

Below is the HTML code:

<div class="warning">This is just a test.</div>

And here is the corresponding CSS code:

.warning {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('images/icons/warning.gif');
}

Answer №1

To achieve a close image, you can utilize absolute positioning.

All you have to do is enclose your markup within a parent div container.

<div class="parent">
<div class="warning">This is just a test.</div>
    <img class="close" src="http://findicons.com/files/icons/1715/gion/24/dialog_cancel.png" />
</div>

Then apply CSS as shown below:

.parent
{
  position:relative;
}
.close
{
    position:absolute;
    top:-15px;
    right:-15px;
    height:20px;
    width:20px;
}

JS Fiddle

To hide the close image, you may need to include some JavaScript code.

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

Failure to persist data to the database despite using Mongoose Document.set method

Currently, I am performing a manual upsert operation on a Collection using a JSON Array. In the process, I iterate through the array and search for a match. If a match is found, I execute the set function; otherwise, I perform an insert operation into the ...

Determine user connectivity in Angular 4 using Firebase

My current setup involves using Firebase for authentication with Google. However, I am encountering an issue where upon refreshing the page after being connected, I am unable to retrieve the Session/CurrentUser information. firebase.auth().onAuthStateChan ...

Retrieve the content of a particular text input field that is accompanied by a checkbox, and then display this information within an

In this example, the "textbox" is currently empty and requires user input. The checkbox should mirror what is typed in the textbox (type="checkbox" value=written-text-on-profile-textbox) When the checkbox is selected, it should take the text entered in th ...

Display JSON information in a visual tree diagram

Greetings, I am a complete beginner in the world of web development and am currently exploring React JS. I have a question regarding representing JSON object data in a graphical view, specifically a tree view on the UI side using React JS. Additionally, I ...

Launching the forEach function within an ng-repeat loop was it can be done by

I need to implement a function within the ng-repeat that will convert the value of Qprogress object in my JSON into a percentage. I already have the function written, but I am struggling with how to trigger it. I attempted to use a forEach loop inside the ...

Discovering the summation of chosen options multiplied by input fields with the assistance of jQuery

I am attempting to calculate the average for different subjects and print it immediately whenever the user modifies a value. To input the marks, I am using input fields and corresponding select options for the hours allotted to each subject. I can accura ...

What is the best way to limit the input field to only allow up to 100 characters

I have implemented the min and max attributes in my code <input min="1" max="100" type="number"> Upon hovering over the input field, an error message is displayed stating "please select a value that is no more than 100." I am looking for a way to ...

Troubleshooting issues with browser scrollbars in a Silverlight application (HTML)

I am currently working on a simple silverlight application and I need to incorporate web browser scroll bars into it (scroll bars should not be inside my silverlight app). This is the HTML code I have: <style type="text/css"> html, body { heigh ...

Node.js with Koa: Discontinuation of generator usage on the next step

I am working with a custom object in which I pass a parameter, and then I need to search for all documents in my collection and process them. Here is the code for my custom object: var db = require('../lib/db'); function Widget(n,l,c,o,t,p) { ...

Arranging search findings based on relevance using javascript

I'm developing a personalized search feature. Currently, when I type "The R," the search results list starts with The Fellowship of the Ring because the phrase "the ring" is in its .text property. However, I want The Return of the King to appear first ...

Ways to expand HTML input fields to fill the whole table cell

Currently working on a calculator project and I'm facing an issue with making a HTML button span the entire cell. I've managed to stretch the button horizontally but struggling to get it to fill the cell completely. Curious as to why setting widt ...

Unable to get lightbox_me to function when clicking event is triggered

I am completely new to this, so I want to apologize in advance if I accidentally offend or upset anyone. Recently, I created my very first website (). The website includes a shopping cart feature powered by Plum shop, which is functioning perfectly fine. ...

Using a PHP classes array as the name attribute of an HTML select tag

I have a requirement to implement a similar structure in PHP as we do with structs in C. I am aware that in PHP, we use classes for this purpose. However, I need to utilize an array of these classes for naming select tags. Below is my code snippet: <?p ...

The issue with mCustomScrollbar's "scrollTo" function not functioning properly has been detected within a single-page application

Although there are many similar questions out there, I have been unable to find a solution to my particular issue. In my single page application with metro style design, I am facing an issue where the scroll position does not reset back to its original pl ...

Ajax response data triggered twice

I'm struggling to understand why my data is being called twice. I attempted to replace 'append', but it's not working. I suspect the issue lies within my controller. Here is my Ajax call: jQuery(document).ready(function($) { $('# ...

Creating a split hero section view using a combination of absolute/relative CSS techniques, Tailwind, and React

I'm in the process of creating a website using Nextjs, React, and TailwindCSS, and I aim to design a Hero section that resembles the one on the following website. https://i.sstatic.net/tq3zW.png My goal is to: Have a text title and buttons on the l ...

Tips for redirecting to a 404 page when encountering invalid data in getStaticProps

For my Next.js application, I need to retrieve all articles written by a specific author. The author's ID is obtained from the request parameters. I have already pre-generated some authors using getStaticPaths. Within the getStaticPaths function, I h ...

What is the best way to capture keyboard input in JavaScript?

I'm currently working on a project that requires taking input from the keyboard. The user should be able to enter multiple words and once they press CTRL+D, the program should exit and display the result. For instance, this is what can be entered in ...

Can someone guide me on how to iterate through a form in jQuery starting from the bottom and moving upwards, beginning with the innermost element, when the ID of the deepest element is unknown

Within my MVC web application, I have implemented a dynamic form builder that organizes forms into sections and questions. Sections can contain either questions or more sections. The objective is to have certain sections open based on specific question in ...

Is there a way to create a vibrant, multicolored background without the use of images?

I am currently developing a mock website and have encountered an issue. Here is the Wix webpage I am using as a reference. My goal is to create multicolored div boxes at the bottom of my webpage where I can overlay text. However, I am struggling to achieve ...