Bootstrap: Open Another Modal in Modal

Bootstrap: Open Another Modal in Modal

data-dismiss makes the current modal window force close

data-toggle opens up a new modal with the href content inside it

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

or

<a data-dismiss="modal" onclick="call the new div here">Click</a>

do let us know if it works.

• You might also want to take a look around the Modal Documentation

Bootstrap 3 - open modal from another modal

you can use http://jschr.github.io/bootstrap-modal/bs3.html for that; check stackable example.

Bootstrap modal: close current, open new

Without seeing specific code, it's difficult to give you a precise answer. However, from the Bootstrap docs, you can hide the modal like this:

$('#myModal').modal('hide')

Then, show another modal once it's hidden:

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

You're going to have to find a way to push the URL to the new modal window, but I'd assume that'd be trivial. Without seeing the code it's hard to give an example of that.

How to open a modal within another modal in React?

Take a look at how you should be using Boostrap modals with React: https://www.pluralsight.com/guides/working-with-bootstraps-modals-react

Basically, you install the npm packages: npm i react-bootstrap bootstrap
then, you import the Modal from the Package, and you use it as a component to wrap your content:

 <Modal>
  //your content here
 </Modal>

Now the modals should be managed by the state, so you give it a state:

const [isModalOneOpen, setIsModalOneOpen] = useState(false) //modal is closed

Now you can use that state to pass it as a prop to the modal:

<Modal show={isModalOneOpen}>
  //your content here and lets add a button to open the second modal from here:
    <button onClick={() => setModalTwoOpen(true)}>Modal 1 will open</button>
</Modal>
<button onClick={() => setIsModalOneOpen(true)}>Open Modal 1</button> //this button will open the first modal

Now, let's add the second Modal, same as the first one but with a different state:

const [isModalTwoOpen, setIsModalTwoOpen] = useState(false);

<Modal show={isModalTwoOpen}>
  //your content here
</Modal>

Now, to close the modals from anywhere, you can simply set the state to false of the modal you want to close, for example:

<Modal show={isModalTwoOpen}>
  //your content here
  <button onClick={() setIsModalTwoOpen(false)}>Close this modal</button>  
</Modal>

Note: if Modal 1 is in one component and Modal 2 is in another one, then you need the Manage the state of both modals from the parent component. Also, as noted in the comments, opening modals over modals is not a nice user experience, just to keep it as a side note in your designs.

---

Related Topics