Ways to update modal content upon clicking a button

I have a scenario where I need to display 2 modals (box1 and box2) in my code with box2 appearing on top of box1. Each modal has its own button, and I want to make sure that box1 appears first. Then, when the user clicks the button in box1, it transitions smoothly into box2 while making box1 disappear. I currently have 4 modals in my code, but I will adjust them later. To see this transition in action, please view the full page version. OBS: Please open the code snippet in full page so that the modal shows up

    .conteudo {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
}

.box, .box2 {
    width: 100%;
    max-width: 500px;
    background: #fff;
    position: absolute;
    bottom: 0;
    height: 400px;
}

.lineButton button {
    font-size: 14px;
    text-align: center;
    border: 2px solid black;
    padding: 16px;
    border-radius: 16px;
}
    <body>
    <div class="conteudo">
        <div class="box">            
            <div class="boxes">
                <div class="modalTxt">
                    <h1>MODAL 1 <br>Accept?</h1>
                    <div class="lineButton">
                        <button type="submit" class="accept1">Accept</button>
                    </div>                           
                </div>         
            </div>
        </div>
        <div class="box2">            
            <div class="boxes">
                <div class="modalTxt">
                    <h1>MODAL 2 <br>Accept?</h1>
                    <div class="lineButton">
                        <button type="submit" class="accept2">Accept</button>
                    </div>                           
                </div>         
            </div>
        </div>
    </div>
</body>

javascripthtmljquerycss

Answer №1

To make elements appear and disappear on button click, you can use the addEventListener method to listen for a click event. First, create a CSS class to hide the elements by setting display: none. Then add this class to all elements that should be initially hidden. Finally, remove the class from the element you want to show and add it to the element you want to hide.

const BUTTON_1 = document.querySelector('.accept1');
const BOX_1 = document.querySelector('.box');
const BOX_2 = document.querySelector('.box2');

BUTTON_1.addEventListener('click', function() {
  BOX_1.classList.add('d-none');
  BOX_2.classList.remove('d-none');
})
.conteudo {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
}

.box,
.box2 {
  width: 100%;
  max-width: 500px;
  background: #fff;
  position: absolute;
  bottom: 0;
  height: 400px;
}

.lineButton button {
  font-size: 14px;
  text-align: center;
  border: 2px solid black;
  padding: 16px;
  border-radius: 16px;
}

/* added CSS */
.d-none {
  display: none;
}
<div class="conteudo">
  <div class="box">
    <div class="boxes">
      <div class="modalTxt">
        <h1>MODAL 1 <br>Accept?</h1>
        <div class="lineButton">
          <button type="submit" class="accept1">Accept</button>
        </div>
      </div>
    </div>
  </div>
  <div class="box2 d-none">
    <div class="boxes">
      <div class="modalTxt">
        <h1>MODAL 2 <br>Accept?</h1>
        <div class="lineButton">
          <button type="submit" class="accept2">Accept</button>
        </div>
      </div>
    </div>
  </div>
</div>

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

JavaFX WebEngine pauses until ajax is finished

Currently, I am working on a JavaFX data mining application that heavily relies on WebView and WebEngine. The entire mining process involves two main steps. Firstly, the user navigates to a specific website using the UI in WebView to configure the search f ...

jqueryajaxjavafxjavafx-webengine

Implementing Isotope layout in Reactjs with data-attributes for filtering and sorting content

I am currently working on optimizing the isotope handler within a react component. My goal is to implement filter options such as category[metal] or category[transition], as well as combo filters like category[metal, transition]. Here is the sandbox for t ...

javascriptreactjsjquery-isotope

Is there a way for me to determine if an image created with Image() has had its source modified?

Is there a way to track changes in the src attribute of images created using the Image constructor on a webpage without needing the image to be fully loaded? I have attempted to override the Image.onload method, but it does not log anything: Image.prototy ...

javascript

What is the best method for displaying a radio button as selected based on a variable value?

I have a variable that stores the value of a radio button. After checking certain conditions, I want to dynamically select the radio button based on this value. if(cheque_date == system_date) { cheque_value='Current'; } else { cheque_value ...

javascriptphpjquerycodeigniter

Struggling to understand the process of creating a new page in Express

I've created a file called ships.js in my routes folder: var express = require('express'); var router = express.Router(); /* GET Ships page. */ router.get('/ships', function(req, res, next) { res.render('ships', { tit ...

javascriptexpressroutes

Is it possible to generate a dynamic submenu and trigger events using the append method?

As I attempted to add a submenu within another submenu on a navigation bar, my goal was to have the submenu "reports management" appear when the Report option is clicked. Below is the code snippet I used. HTML <li class="drop-down"&g ...

jquery

Sending the most recent result to each dynamically created div

In my WordPress project, I have an event panel that displays upcoming event details and shows the remaining time until the next event. The countdown dynamically gets values from the database and calculates the time left based on the user's input in th ...

javascriptjqueryhtmldomjquery-traversing

Remove all instances of an empty array within a larger array

Is there a way to eliminate an empty array from within a parent array prior to adding a new element? In the structure provided, it appears as follows: var parentArray = [ ['123', '345'], [], ['12'] ] The goal is to remove t ...

javascriptnode.jslodash

Choosing the following choice using the Material-UI Select tool

Looking for a way to enhance my dropdown select from MUI in a Nextjs application by adding two arrows for navigating to the next/previous option. Here's what my code currently looks like: <StyledFormControl> <Select value={cu ...

javascriptreactjsmaterial-ui

Modifying images through resizing and scaling within a flexible web application to accommodate different screen dimensions

With my web application, I have an image that changes in sizes as it calls a different image from the database each time it is viewed. My goal is to make sure this image is displayed responsively on different devices. For smartphones, I want the image to f ...

htmlimagecssresizeresponsive-design

Unveiling all Gatsby.js routes/endpoints in Cypress tests: A comprehensive guide

I am currently in the process of creating end-to-end tests with Cypress for a project built on Gatsby. One specific test requires me to iterate through all pages of my Gatsby site. To accomplish this, I require a test fixture (such as endpoints.json) cont ...

javascriptreactjsgraphqlfrontendgatsby

Different ways to determine if a given string exists within an Object

I have an object called menu which is of the type IMenu. let menu: IMenu[] = [ {restaurant : "KFC", dish:[{name: "burger", price: "1$"}, {name: "french fries", price: "2$"}, {name: "hot dog", d ...

javascripttypescript

Keeping extensive files/information on disk in order to alleviate browser memory usage in JavaScript

Currently, I am faced with a challenge involving the encryption of very large files. Unfortunately, my browser keeps crashing due to running out of memory while trying to handle these massive files. To address this issue, I am considering transferring som ...

javascriptcaching

To add additional nested data to a JSON object in JavaScript, you can use the push method or update

Looking to enhance the nested object data within my existing object The current structure of the JSON object array resembles this: var orderDetails = [{ "utilityType": "Electric", "firstName": "ROBERT", "lastName": "GUERRERO", "utilityList": [{ ...

javascriptjqueryjson

spacing between text and bottom border

Is there a way to add space between text and the border below, as shown in the image linked? I'd like the space to be 5px with a font-size of 15px. My attempt: .selected { color: #284660; } .selected:after { content: ''; position: a ...

htmlcss

Customize a jQuery tab plugin to show a particular tab upon initialization [with JSFiddle example]

Currently, I am utilizing the jQuery tabs demo by Jack Moore from . However, I require a modification in the JS to initially display a specific tab (modifying the URL is not feasible for my intended scenario). I have everything prepared in this fiddle: ht ...

javascriptjquery

Is there a child missing? If so, add a class

I need to add the class span.toggle if the parent element of li does not have a child ul element. click here to view on codepen Snippet of HTML: <html lang="en"> <head> <meta charset="UTF-8> <title>No Title</title>& ...

javascriptjqueryhtmlcss

Choose the first and last div element in the selection

Is there a way to target the first and fourth div elements using the :nth-child selector for styling purposes? .main{ width:460px; height:240px; } .box{ width:100px; height:100px; background:red; float:left; margin:10px; } /*I tried */ . ...

htmlcsscss-selectors

AngularJS Event Handler Fails to Trigger

I'm currently working on a form that I need to submit using the ng-submit event through a custom Auth service. This is a snippet of the login.html (partial template) <div class='container'> <form class='form-signin' ...

javascriptangularjsevent-handlingscope

Instead of utilizing just one <select> element, Django mistakenly generates two while attempting to implement Bootstrap for form uploads

Struggling to develop a website using django and facing an issue where two select lists are appearing instead of one. Here is the HTML code: <form action="/upload/" method="post" enctype="multipart/form-data"> {% csrf_token %} <div class="form-g ...

pythonhtmldjangotwitter-bootstraptemplates