What is the best way to create a button that will trigger a modal window to display a message?

I am looking to create a button that will open a modal window displaying a message. However, when I tried to add a label and viewed the page, the desired window appeared on top of the rest of the content. But unfortunately, clicking the button did not produce any action.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CarpiShop</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d78acec4c8c9d4e796899e8996">[email protected]</a>/font/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="./styles/index.css">
</head>
<body>

    <div class="wrapper">
        <header class="header-mobile">
            <h1 class="logo"> </h1>
            <button class="open-menu" id="open-menu">
                <i class="bi bi-list"></i>
            </button>
        </header>
        <aside>
            <button class="close-menu" id="close-menu">
                <i class="bi bi-x"></i>
            </button>
            <header>
                <div class="user">
                    <i class="bi bi-person-circle"></i>
                </div>
                <h1 class="logo"> <input class="busqueda-productos" type="text" placeholder="¿ que estas buscando? "></h1>
            </header>
            <nav>
                <ul class="menu">
                    <li class="">
                       
                        <div class="btn">
                            <i class="bi bi-search"></i>
                        </div>
                        
                    </li>
                    <li>
                        <button id="todos los productos" class="boton-menu boton-categoria active"><i class="bi bi-hand-index-thumb-fill"></i> Todos los productos</button>
                    </li>
                    <div>
                        <div id="filtros" class="boton-menu boton-categoria"></i></div>
                        <label for="filtros">
                            <i class="bi bi-hand-index-thumb"></i>  filtros
                        </label>
                        <div>
                            <input type="checkbox" id="nose">
                         <div class="container-filtros">
                            <div class="contenido-filtros">
                                <h4>desde</h4><input type="number" step="0.01"><h4>hasta</h4><input type="number" step="0.01" min="0" max="1.000.000.000.000">
                                <div class="ubicacion">
                                    <i class="bi bi-geo-alt-fill">ubicacion</i>
                        </div>
                        <div class="cerrar">
                                        <label for="filtros"></label>
                                        <i class="bi bi-backspace-fill"></i>
                        </div>

                            </div>
                         </div>
                        <button id="vender" class="boton-menu boton-categoria"><i class="bi bi-hand-index-thumb"></i>¿quiere vender algo?</button>
                    </li>
                    <li>
                        <button id="p.q.r.s" class="boton-menu boton-categoria"><i class="bi bi-hand-index-thumb"></i> P.Q.R.S</button>
                    </li>
                    <li>
                        <a class="boton-menu boton-carrito" href="./carrito.html">
                            <i class="bi bi-cart-fill"></i> Carrito <span id="numerito" class="numerito">0</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <footer>
                <p class="texto-footer">© hecho por biombrock</p>
            </footer>
        </aside>
        <main>
            <h2 class="titulo-principal" id="titulo-principal">Todos los productos</h2>
            <div id="contenedor-productos" class="contenedor-productos">
             
            </div>
        </main>
    </div>
    
    
</body>
</html>

Could you please provide guidance on modifying the question and integrating the label correctly? Any assistance would be greatly appreciated!

javascripthtmlcss

Answer №1

I couldn't find a modal in your current code, you'll need JavaScript in addition to your existing HTML and CSS to make it work. Here's a basic modal that I put together:

// Function to open the modal
function openModal() {
    const modal = document.getElementById("modal");
    modal.style.display = "block";
}

// Function to close the modal
function closeModal() {
    const modal = document.getElementById("modal");
    modal.style.display = "none";
}

// Add a click event listener to the "REGISTRATE" button
const openModalButton = document.getElementById("openModal");
openModalButton.addEventListener("click", openModal);
.modal {
    display: none; /* Hide the modal by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal content */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 5px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}

/* Close button */
.close {
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>

        <div id="modal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal()">&times;</span>
                <p id="message">Your message goes here.</p>
            </div>
        </div>
        <button id="openModal" class="register">REGISTRATE</button>
        
    </body>
</html>

Feel free to tweak the code as needed for your project. I hope this helps!

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

Create an instance using the window object in JavaScript

Having an issue when trying to instantiate a class using the window object. I have a namespace called UTIL and within it, there is a class defined as follows: var UTIL = { Classes : {}}; UTIL.Classes.ObservationVal = function(state, id, type, context, pe ...

javascriptwindow

I need either XPATH or CSS to target a specific checkbox within a list of checkboxes wrapped in span tags

I'm trying to find the XPATH or CSS locator for a checkbox in an HTML span tag that has a label with specific text, like "Allow gender mismatch". I can locate the label using XPATH, but I'm not sure how to target the input tag so I can click on t ...

csspython-2.7seleniumxpathselenium-webdriver

Retrieve a JSON file with Hebrew data from a server and then interpret it using Node.js

I have a JSON file with dynamic content stored on a remote server acting as an API. The file also includes Hebrew text in its values. How can I retrieve the response and convert it into a JSON object? Here is the code snippet I have put together using Re ...

javascriptjsonnode.jshttputf-8

Cast your vote once for each post within the Angular application

Currently, users are only able to vote up or down once in general. I would like to allow users to vote up or down once per post. <div ng-repeat="post in posts | orderBy:'-upvotes'"> <span class="glyphicon glyphicon-thumbs-up" ...

javascriptangularjs

Having trouble with selecting checkboxes in a div using jQuery? While it may work in IE and Firefox, Chrome seems to be causing issues

In my div, I have several checkboxes placed under labels for formatting purposes. There is a list of checkbox names that need to be checked upon certain actions. Here is the list: var columns= ['2','5','4'] This is the curren ...

javascriptjqueryhtmlinternet-explorergoogle-chrome

Exploring the documentation of JQuery's $.Ajax Function

Can anyone help me locate the parameters in the JQuery Docs? jqXHR.done(function( data, textStatus, jqXHR ) {}); http://api.jquery.com/deferred.done/ I've been trying to determine what data represents but haven't had any luck. I've notic ...

javascriptjqueryajax

Language translation API specifically designed to convert text content excluding any HTML formatting

I have a dilemma with translating text content in an HTML file into multiple languages based on user input. To accomplish this, I am utilizing the Microsoft Translator AJAX interface. The structure of my HTML file looks something like this; <h1>< ...

javascripthtmlajaxgoogle-translatemicrosoft-translator

In the event that the get request fails, go ahead and clear the

Currently facing an issue and seeking a solution: I have a game running that retrieves the state of the game periodically. However, if a user logs out, the game ends but continues to send put requests at the set interval. I am exploring options like setti ...

javascriptreactjsresthttpput

Tips for embedding the <img> element inside the <a> element

I'm attempting to place an image within a hyperlink tag. Current code: <div class="Sample"> <a href="http://www.Sample.com"> <img src="http://www.Sample.com/Sloth.jpg"> </a> </div> I wish to add <img class= ...

javascriptjqueryimage

Solution for displaying table cells in IE 7 and lower using Javascript

Lately, the community has come up with some amazing tools to push early versions of IE beyond their intended capabilities. For example, using multi-column CSS selectors. However, I've been struggling to find a JavaScript that can be loaded conditional ...

javascriptjquerycss

What is the proper way to define the scope for invoking the Google People API using JavaScript?

I am attempting to display a list of directory people from my Google account. export class People { private auth: Auth.OAuth2Client; private initialized: boolean = false; private accessToken: string; constructor(private readonly clientEmail: strin ...

javascripttypescriptgoogle-apigoogle-people-api

The scripts are mistakenly interpreted as stylesheets, but are actually being transferred with the MIME type text/html

Encountering two console warnings while using Chrome: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". domain/:11 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". ...

javascriptphphtml.htaccessmime-types

Order of callback execution in jQuery's ready function

When two JavaScript functions on a page need to be called once the document load is complete, is there a possibility that one function could be executed before the other, or will it always be the same order? For example, using jQuery with the following co ...

javascriptjqueryonreadystatechange

Obtaining the latest state within the existing handler

In my React application, I have a handler that shuffles the state entry data: state = { data:[1,2,3,4,5] }; public handleShuffle = () => { const current = this.state.data; const shuffled = current .map((a: any) => [Math.random() ...

javascriptreactjs

Unexpected behavior with VueJS Select2 directive not triggering @change event

Recently, I implemented the Select2 directive for VueJS 1.0.15 by following the example provided on their official page. However, I am facing an issue where I am unable to capture the @change event. Here is the HTML code snippet: <select v-select="ite ...

javascriptjquery-select2vue.js

When using NodeJS with expressJS, remember that req.body can only retrieve one variable at a

I'm having trouble with my login and signup pages. The login page is working correctly, but the signup page is only transferring the password for some reason. App.JS: var express = require("express"); var app = express(); var bodyParser = require("bo ...

javascriptnode.jsexpress

What is the best way to load a partial in Rails asynchronously with AJAX?

I am currently using the following code to load a partial when I reach the bottom of a div containing a table: $(document).ready(function () { $("#pastGigs").scroll(function () { if (isScrollBottom()) { $('#pastGig ...

javascriptjqueryruby-on-railsajaxasynchronous

Combine lists with floating elements positioned to the left or right

My HTML includes the following ul tag: <ul style="position:absolute"> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li> list 4 <p>list 4 content goes here</p> ...

htmlcss

Configuring a Meteor.js application requires defining variable scopes for templates in order to manage

Is there a way to define a variable that is limited in scope to a specific template? I want this variable to be accessible by multiple helpers within the template, but not outside of it. For example, how can the game variable be shared between two templat ...

javascriptnode.jsmeteor

Guide to dynamically insert rows in HTML using Vue.js based on the selected option

This is the initial row. Depending on the selection made here, different rows will be displayed <div class="row"> <div class="col-md-4"> <div class="form-group label-floating"> <label class="control-label">Case Type< ...

javascriptjqueryhtmlvue.jsvue-component