---
title: "How to open bootstrap multiple custom model popup?"  
description: "How to open bootstrap multiple custom model popup?"  
author: "Anonymous User"  
published: 2015-02-25  
updated: 2015-02-25  
canonical: https://www.mindstick.com/forum/12981/how-to-open-bootstrap-multiple-custom-model-popup  
category: "bootstrap"  
tags: ["bootstrap modal"]  
reading_time: 1 minute  

---

# How to open bootstrap multiple custom model popup?

Hello I’m new in bootstrap.

I’m open [bootstrap model popup](https://www.mindstick.com/forum/33555/how-to-use-bootstrap-model-popup) successfully.

**This Is my model popup [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii)**

```
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">New Model</button><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>        <h4 class="modal-title" id="myModalLabel">Modal title</h4>      </div>      <div class="modal-body">        ...      </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>
```

My [question](https://www.mindstick.com/blog/23175/how-to-solve-neet-question-paper-in-less-time) is how to open [multiple](https://www.mindstick.com/blog/12797/iowa-is-expected-to-see-heavy-growth-in-multiple-sectors) [custom](https://www.mindstick.com/blog/12298/use-custom-writing-services-to-get-through-the-finals) model popup.

[Thank you in advance](https://answers.mindstick.com/qa/40482/why-was-1968-a-year-of-tension-and-turmoil-list-10-events-1-being-the-best-and-10-the-worst-thank-you-in-advance).

## Replies

### Reply by Anonymous User

## Try this code:

```
<div class="container">    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">        New Model    </button></div> <script>        $(function () {            $(document).on('click', '.btn-warning', function () {                var me = this;                var le = $('.modal-dialog').length + 1;                var customModal = $('<div class="modal fade myModal' + le + '" id="myModal"
tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button
type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4
class="modal-title" id="myModalLabel">Modal title</h4></div><div
class="modal-body">...</div><div class="modal-footer"><button
type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-warning">New
Model</button></div></div></div></div>');                $('body').append(customModal);                $(".myModal" + le).modal({                    backdrop: 'static',  }, 'show');                $(".myModal" + le).on('hidden.bs.modal', function () {                    $(".myModal" + le).remove();                });            });        });    
</script>
```


---

Original Source: https://www.mindstick.com/forum/12981/how-to-open-bootstrap-multiple-custom-model-popup

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.