Steps to Launch a Fresh Modal Without Exiting the Current Modal

Is it possible to open a modal without closing the current modal?

I found this code on a website and I am trying to implement it:

<!DOCTYPE html>
<html lang="en>

<head>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <style type="text/css">
    .bs-example {
      <!--from ww w .j a v a 2s .co m-->margin: 20px;
    }
  </style>
</head>

<body>
  <div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch
          Demo Modal</a>
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Confirmation</h4>
          </div>
          <div class="modal-body">
            <label>ID</label> <input type="text"><br><br>
            <input type="button" value="Take Photo">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

I am looking to have a functionality where clicking the 'Take Photo' button inside the modal will open a new modal without closing the current one. Can someone help me achieve this? Thank you!

Answer №1

Are you interested in a similar setup?

Check out this example here

Here is the HTML code:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">Modal 1</h4>
      </div>

      <div class="modal-body">
        <form role="form" action='#' method="post">
       <input type="text" class="form-control" placeholder="Username">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="signin">Sign In Now</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
        </form>
    </div>
  </div>
</div>

  <!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">Modal 2</h4>
      </div>

      <div class="modal-body">
        <p>Sign In Error</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
        </form>
    </div>
  </div>
</div>

And here is the Javascript code:

//trigger next modal
$("#signin").on( "click", function() {
        $('#myModal2').modal('show');  
});

If you prefer a different option with more JS/CSS, you can check this out: https://codepen.io/maouida/pen/NPGaaN

Answer №2

According to the documentation of Bootstrap Version 5.2.3, it is explicitly mentioned that it is not possible to have multiple modals open simultaneously. However, if you find yourself in a situation where you absolutely need to have two modals open at the same time, you can take a look at this related thread for possible solutions.

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

Elevate a division within its container

Is there a way to make a smaller div positioned at the top when it's placed next to a larger one in the same container? I'm looking for a solution that doesn't involve using position-relative and manually adjusting the placement. Take a loo ...

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...

Ways to integrate a CSS file into XSLT

I have a CSS file that looks like this: .table_class1DeffCell { border-top-width : 1; border-left-width : 1; border-right-width : 1; border-bottom-width : 1; } .table_class11DeffCell { border-bottom-color : 000000; border-top-color : 000000; border-right- ...

How can I align text to the right in a navbar using Bootstrap 5?

My current navbar setup is as follows: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <div class="collapse navbar-collapse" id="navbarText"> ...

Creating a CSS path that incorporates two conditions simultaneously

I'm currently facing a challenge with finding the CSS path in this scenario: There are over 20 child nodes, and I need to identify every node that has fill attribute not equal to none. I understand that I can target a specific node using :nth-child( ...

Personalizing CSS classes in ASP.NET

In the project I'm currently developing, users will have the ability to customize the font color of header titles. These header titles are styled using values from a cssClass, which includes properties such as font-size, font-color, font-weight, and ...

Embedding a thread in an HTML document (Difficult task)

I'm currently working on a method to achieve the following task: Embedding a specific string (such as "TEST") into the content of an HTML page, after every certain number of words (let's say 10). The challenge here is ensuring that the word count ...

The Vite build tool creates unique CSS module classes for each component

Is it possible to set the CSS module class name in the index.js file generated during the Vite build process? I am developing with multiple themes and a single-entry JS file. Currently, this is the output I get when trying to build the project: Index.js & ...

Having trouble with refreshing the div content when using jQuery's $.ajax() function

My goal is to refresh a div that has the id #todos after saving data in the database. I attempted to use .load() within $.ajax() $('.todo--checkbox').change(function () { let value = $(this).data('value'); $.ajax({ url: ...

Searching Text Boxes with Javascript: A Better Way to Handle Arrays

I'm struggling to implement a feature where users can search for authors in a database and be redirected to the corresponding HTML if found. Otherwise, it should display a message saying "No Author Found"... I need some assistance in getting this fun ...

The image is failing to display in the CSS

As a beginner in the world of CSS and HTML, I encountered an issue where my background image is not showing up. Here's the code snippet that I have: ... <style type="text/css"> #header_contain{ width:935px; height: 135px; ...

What are the differences between incorporating JavaScript directly into HTML and writing it in a separate file?

I need help converting this JavaScript embedded in HTML code into a standalone JavaScript file. I am creating a toggle switch that, when clicked, should go to a new page after the transformation. I am looking for the non-embedded version of the function. H ...

Tips for arranging divs in the exact way you want

Can you assist me in creating a layout like the one shown in the image below? I have attempted to achieve it, but my understanding of CSS is lacking and the layout needs to be completed quickly... I experimented with CSS properties such as float, overflow ...

Field for user input along with a pair of interactive buttons

I created a form with one input field and two buttons - one for checking in and the other for checking out using a code. However, when I submit the form, it leads to a blank page in the php file. What could be causing this issue? UPDATE After changing fro ...

Upon clicking a link, the webpage will automatically scroll to a specific point

As I work on creating my website, I have come across a specific need: I currently have a menubar with a dropdown menu. Inside this dropdown, there are 4 different options. These options are all located on the same page. What I would like to achieve is tha ...

Utilizing the power of Bootstrap Navbar within React.js

I recently started working with React and I'm trying to create dropdown menus for my navigation. However, I am facing difficulties in getting everything to function as intended. Despite searching for a solution, I haven't been able to make it wor ...

Guide on how to align the bootstrap popover's arrow tip with a text field using CSS and jQuery

I have tried multiple solutions from various questions on Stack Overflow, but I am still struggling to position the arrow tip of the bootstrap popover correctly. html: <input type = "text" id="account_create"/> js: $('.popov ...

Code displayed on Facebook when sharing a website link implemented in JavaScript

Is there a way to prevent javascript code from appearing in Facebook posts when sharing links, whether it's done manually or through programming? I'm specifically looking for solutions to fix my website so that when I post links on Facebook, the ...

Is it possible to dynamically change HTML content by utilizing a JSON file?

Looking to implement a JavaScript loop (using jQuery) that can dynamically populate the HTML file with content from a JSON file based on matching <div> ids to the JSON "id" values. The solution should be scalable and able to handle any number of < ...

Struggling to receive a response from request.POST.get within the index function of views.py

I am struggling to develop a web application that shows the IP Address of a hostname entered by the user in a text field. Unfortunately, I keep encountering an error where I can't seem to get a response from the URL. As a beginner in this field, I wou ...