The "End Session" button in HTML

Seeking guidance in my journey to learn HTML and CSS, I am attempting to create a dialog box that can be closed with the click of an X button.

Despite successfully adding the X button to the dialog box's upper bar, I am facing an issue where clicking the button does not close the dialog. It remains persistent on the screen after each click.

I am puzzled by this problem and would appreciate any suggestions or solutions to tackle it effectively.

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover {
  opacity: 1;
}

.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<div class="modal-header" data-closable="slide-out-up">
  <button class="close" aria-label="Dismiss alert" type="button" data-close>
        <span aria-hidden="true"><i class="fa fa-window-close">X</i></span>
      </button>
</div>

htmlcssbutton

Answer №1

To achieve the desired outcome, utilize the CSS :checked selector.

Here is an alternative approach:

  <button class="close" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true"><i class="fa fa-window-close">X</i></span>
  </button>

.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

Instead of the above, consider using:

  <input type="checkbox" class="close" aria-label="Dismiss alert" data-close>
    <span aria-hidden="true"><i class="fa fa-window-close">X</i></span>
  </input>

.close:checked {
//when closed input checked run (e.g. change the display property of the menu you want to show):
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

Answer №2

To easily handle the closing of a modal window, you can utilize the JavaScript onclick event handler on the <button> element. Here is an example:

onclick="document.getElementById('modalWindow').style.display='none';"

Replace 'modalWindow' with the id of your modal window. Below is a sample code snippet showcasing this implementation: 

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover {
  opacity: 1;
}

.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<div id="modalWindow">
  <div class="modal-header" data-closable="slide-out-up">
    <button class="close" aria-label="Dismiss alert" type="button" data-close onclick="document.getElementById('modalWindow').style.display='none';">
      <span aria-hidden="true"><i class="fa fa-window-close">X</i></span>
    </button>
  </div> 
  <div>
  This is modal window text....
  </div>
</div>
Read more about handling DOM elements with pure JavaScript at https://developer.mozilla.org/ru/docs/Web/API/Document/getElementById

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

Accept two parameters for password change

Is there a way to include two values, one being the selected value and the other a PHP variable, in a dropdown select element's onChange function? For example: <div> <?php $sql4 = "SELECT DISTINCT (color), id ...

javascriptphphtmlvariables

Creating a mind map: A step-by-step guide

I'm currently developing an algorithm to create a mind map. The key focus is on organizing the nodes intelligently to prevent any overlap and ensure a visually pleasing layout. Take a look at this snapshot (from MindNode) as an example: Any suggestio ...

javascripthtmlcssalgorithmmindmapping

When using jQuery to focus on an input element, the cursor fails to show up

Looking to enhance user experience by focusing on an input element upon clicking a specific div. The HTML structure being used is as follows: <div class="placeholder_input"> <input type="text" id="username" maxlength="100" /> <div ...

javascripthtmljqueryfocustext-cursor

Styling Dropdown Options Based on Conditions in React

In my current project, I am attempting to modify the className of selected items within a mapped array using another array (this.props.notPressAble). The reason for this is because I want certain objects in the array to have a different CSS style. handleOp ...

javascriptcssreactjs

Encountering an error when attempting to switch to an IFrame using Selenium in C#

When attempting to switch to the iframe, I encountered a "No Such element exception". <div class="panel1" id="list_container" style="height: 181px;"> <div class="control" id="FilteredDashboardList"> <div class="splitter h ...

c#htmlseleniumiframe

The highcharts datetime format is not functioning properly within a Bootstrap 4 column

I am using highcharts to display a datetime chart within a Bootstrap 4 column like the example below: HTML: <section> <div class="container"> <div class="row"> <div class="col-md-8"> ...

htmljquerytwitter-bootstraphighchartsbootstrap-4

What is the best approach to retain a user's selection for dark mode?

I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...

javascripthtmlcss

Steps for creating a file selection feature in Chonky.js

I recently integrated the Chonky library into my application to build a file explorer feature. One challenge I am facing is figuring out how to select a file and retrieve its unique ID when the user double clicks on it. const [files, setFiles] ...

javascripthtmlreactjswebshared-libraries

Is there a way to dynamically refresh the options in a select dropdown using jQuery?

I'm facing an issue with updating the options in a select element. Here is how my current select element looks: <select id="productId"> </select> Below is the jQuery code I am using: ... if (data.success) { var items = []; $.ea ...

jqueryhtml

There are no visible CSS styles detected in the email

Why do the CSS styles not appear when viewing this HTML page in an email client like Yahoo or Gmail using mutt? The table appears plain without any styling, but it displays correctly in a web browser. Is there something I am overlooking? mutt -e "set cont ...

htmlcssemailhtml-emailmutt

The appearance of a <div> element results in a border being applied to a different element

When hovering between the two borders, an undesirable (albeit very small) border appears around them. Can anyone assist me with this issue and explain why it is happening? I have attempted to set a transparent border on each element but without success. R ...

htmlcssbordertransition

Trouble arises when displaying data using AngularJS in an HTML environment

I'm currently facing a challenge understanding where I went wrong in my code. My goal is to display the initial array values in the table data, but so far, I haven't had much success. Here is the HTML section of the code; <body ng-controller ...

javascripthtmlangularjsangularjs-ng-repeat

Vanish and reappear: Javascript block that disappears when clicked and shows up somewhere else

My goal is to make three squares randomly disappear when clicked on the page. However, I am facing an issue where some of them, usually the 2nd or 3rd one, reappear elsewhere on the page after being clicked. I have created a jsfiddle to demonstrate this: ...

javascriptjqueryhtmlcss

Utilizing tag keys for inserting text and adjusting text sizes within a Web application

Creating an online editing interface for coursework where keyboard events are used. The goal is to have the tab key insert text, while also reducing the size of the text on that line. However, upon using getElementById, an error message pops up stating: ...

javascripthtmlcssevents

Click on the navlink to open the HTML page in the same window

I have developed a navigation bar with a menu that includes options like home, about-us, and more. When I click on the navbar, the nav-menu slides down to display a list of navlinks. However, when I select a navlink, such as about-us, the nav menu slides b ...

jquerycss

Is it possible to alter the content of an HTML element by utilizing PHP Include?

I am facing an issue with a PHP header setup similar to this: <body> <h1>Title</h1> </body> This code is in a file named header.php, but when I navigate to another page and include the header.php file like this: <?php include( ...

phphtml

Achieving a Full Utilization of Available Space in Bootstrap

I'm working on an app using react-bootstrap and I'm looking for guidance on how to utilize the remaining space in the main section, excluding the header and footer. Any suggestions? import Row from "react-bootstrap/Row"; import Col from ...

cssreactjstwitter-bootstrapreact-bootstrapbootstrap-5

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

Is there a way to directly convert an HTML page generated using PHP and CSS into a PDF format without the use of libraries? I have come across multiple libraries that can accomplish this task, but I would prefer not to rely on any external libraries and i ...

phphtmlcsspdfheader

Allow the select option to be clicked, while preventing it from automatically filling the select input field in reactstrap's Input component

I have a select with an option called "+ Create new" When the user clicks on this option, I am displaying a modal to create a new option. However, I do not want this select option to show "+ Create new" after it is clicked. How can I make the o ...

javascripthtmlcssreactjs

Submission of Bootstrap form data is not working within a modal window

I am facing an issue with the form I have created: https://i.sstatic.net/OoBPh.png <form action="../util/vcput.php" method="POST"> <input name="vockey" type="hidden" value="<?php echo getCsrfTok ...

htmlformstwitter-bootstrapbootstrap-5