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

Achieving the perfect overlay and centered image effect using CSS

I am attempting to design a banner consisting of 3 images, each with dimensions of 900x420, similar to the image shown below. I am looking for advice on how to align these images such that they are horizontally centered. Any suggestions would be greatly ap ...

htmlcsstwitter-bootstrap-3

Adding up the values of an array of objects by month using ReactJS

To start off, I'm using ChartJS and need to create an array of months. Here's how it looks: const [generatedMonths, setGeneratedMonths] = useState<string[]>([]) const [totalValues, setTotalValues] = useState<number[]>([]) const month ...

javascriptarraysreactjschart.js

Utilizing various layouts in ASP.NET MVC with AngularJS

I am setting up two different layouts, one for visitors and one for management. Routes: app.config(['$routeProvider', function ( $routeProvider) { $routeProvider .when('/', { templateUrl: 'Home ...

javascriptasp.netasp.net-mvcangularjsangular-routing

Steps to select an option from a drop-down menu that does not have an ID assigned

How can I interact with a drop-down element that appears after clicking on an item? <div class="field loan-selection"> <label class="field__body"> <div class="field__label">Nettokreditbetrag <!-- -->&nbs ...

javascriptjavaseleniumselenium-webdriverxpath

Retrieve the child element that is being clicked

Alright, I'm facing a little issue here (it seems simple, but I just can't seem to crack it)... Let me paint the picture with a snippet of HTML code below: <!-- New Website #1 --> <!DOCTYPE html> <html style='min-height:0px; ...

javascriptjqueryhtmlcss

What could be causing the asynchronous function to return a pending promise even after using the await keyword?

I seem to be overlooking something as I cannot comprehend why my promise does not resolve. I have simplified the code to this basic example: ... console.log("before"); const promise = second(); console.log("after"); console.l ...

javascriptnode.jspromiseasync-await

Tips for aligning placeholder and text at the center in a React Material UI TextField

Existing Layout: https://i.stack.imgur.com/Zv4Tg.png Desired Layout: https://i.stack.imgur.com/Xuj6O.png The TextField element is displayed as follows: <TextField multiline={false} autoFocus placeholder={props.defaultAmt} ...

javascriptcssreactjsmaterial-uijsx

Is it possible to activate a hover effect on an image within a button only when the button itself is being

I'm struggling to figure out how to activate the image hover effect when hovering over a button with an image inside, but not directly over the image itself. Here's what I have so far: <button type="button" class="btn btn-normal"><img s ...

htmlcssimagebutton

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

What is holding Firestore back from advancing while Firebase Realtime Database continues to evolve?

I am currently working on a chat application using Firebase within my Vue.js project. In this setup, I need to display the user's status as either active or inactive. To achieve this, I implemented the solution provided by Firebase at https://firebase ...

javascriptfirebasevue.jsfirebase-realtime-databasegoogle-cloud-firestore

Don't forget to expand or collapse

I'm struggling to make this work. My goal is to initially display 50 characters and show the rest when the "read more" button is clicked, and vice versa with "read less." Another problem I've noticed is that when I click the back browser button, ...

javascriptjqueryhtml

Can the background color of HTML header text be altered using JavaScript in JQGRID?

Can the background color of HTML header text be modified using JavaScript? Updated: Oops, I forgot to mention that it is for the header text in jqGrid. My apologies for that oversight. ...

javascripthtmlcssjqgrid

The error message is indicating that the function "req.assert" is not

Can you identify the issue with this code snippet (express 4.16.0, TypeError: req.assert is not a function)? userController.signupPost = function(req, res, next) { console.log(req.body); var express=require('express'); var validator = require(&a ...

javascriptnode.jsvalidationexpressexpress-validator

I am not seeing the results I anticipated from my HTML and PHP codes

Currently, I am working on creating a code for a game that involves guessing a random odd number between 1 and 99. My code is as follows- <?php $heading = "Welcome to the guessing game"; $num_to_guess = rand(1,99); if(!isset($_POST['guess']) ...

phphtml

Stop iPhone body scrolling when fullscreen overlay is opened

My goal is to prevent the body from scrolling when my fullscreen overlay navigation is open. I have added a class show-nav to the body with the CSS attribute overflow: hidden, which works perfectly on desktop but not on iPhones. After researching similar ...

jqueryhtmlioscssiphone

What is causing the geolocation heading to remain "null" on Android devices when using Chrome?

Recently, I developed a compact geolocation watch using the following code snippet: navigator.geolocation.watchPosition( this.updateLocation.bind(this), this.errorLocation.bind(this), {enableHighAccuracy: true} ); The function updateLocation ...

javascriptandroidgoogle-chrometypescriptgeolocation

Each time the page is reloaded, the animation's frames per second (fps

In my project, I have two main pages: 'index' and 'about'. The 'about' page includes a cool animation that you can check out here. The issue I'm facing is that when I navigate from the 'index' page to the &apos ...

javascriptanimationvue.jsfrontendweb-frontend

What is the best method for converting a variable with HTML content into a printable string?

In an attempt to display user-entered data from a text box to an HTML div, there seems to be an issue when the data contains HTML content. Instead of displaying the content as a string, it shows it as HTML elements. For example: let text = "<h1>Worl ...

javascripthtmlstring

"Encountering a problem with jQuery AJAX - receiving an error message despite the status code being

Attempting to make a jQuery Ajax request using the following code: $.ajax({ url: '<MY_URL>', type: 'POST', contentType: 'application/json;charset=UTF-8', data: JSON.stringify(data), dataType: 'a ...

javascriptjqueryajax

How can I programmatically trigger the opening of a Material-UI Accordion in ReactJS?

All of the Accordions are assigned unique IDs: const CategoryDisplay: React.FC<Props> = (props) => { ... return ( <> <Accordion id={`category-${accordion.id}`}/> </> ); }; export default CategoryDisplay ...

javascriptreactjsmaterial-uiaccordion