Show different Modals Boostrap

Question

Show different Modals Boostrap

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have an app in Bootstrap which has to show different manners in different pages. For this I have thought to remove these manners and have each in an HTML file so that after each page you can call it to be displayed. I want to do it this way so I do not have to declare in the different HTML the same Divs with the manners so that if I have to create a new HTML, I do not have to make a copy paste with all the manners.

Summary: I can not have a modal in a different HTML and from a JS function call it. Has anyone done this? Can you give me a cable?

Thank you very much!

In the example below, I reply page1.html, what I mean is, if for example on page2.html I need only 2 of the 3 manners, I would touch replicate the code of

<!DOCTYPE html>
<html>
    <head>
     ...
    </head>
    <body>
        <button onclick='openModalOne()'>Open One</button>
        <button onclick='openModalTwo()'>Open Two</button>
        <button onclick='openModalThree()'>Open Three</button>
        <div class="modal fade" id="dialogError" tabindex="-1" role="dialog" aria-hidden="true">
            ....
        </div>
        <div class="modal fade" id="dialogInfo" tabindex="-1" role="dialog" aria-hidden="true">
            ....
        </div>
        <div class="modal fade" id="dialogConfirm" tabindex="-1" role="dialog" aria-hidden="true">
            ....
        </div>
    </body>

</html>

javascript bootstrap modal

asked by Pablo Garcia 12.06.2018 в 11:25

source

3 answers

Why does not the [DataType (DataType.Password)] work for me? add different classes in a foreach

score 1 · Answer 1

Unless you are occupying a template engine that allows the use of partial templates (eg Twig, Handlebars) you will inevitably have to repeat certain code on each of your pages. In other words: you should use a template engine to make your life easier.

However, this behavior could be emulated if you insert the modality html dynamically using ajax , and in turn fill the content of each modal dynamically using ajax , reading an attribute of the button that called it:

Think that on each page you put, at the foot of it, a script that inserts the div that contains the manners and their respective buttons:

<body>
    <div>
       Contenido cualquiera
    </div>
    <div id="modales">

    </div>
    <script src="modales.js"></script>
</body>

In turn. modales.js load via ajax the buttons that open your modal and the same skeleton of the modal, whose html is in a different file called (very originally) modales.html

  jQuery(document).ready(function() {
    jQuery.get('modales.html').then(function(content) {
      jQuery('#modales').empty().append(content);
    });
  });

In modales.html you could have the html that you do not want to repeat again and again:

<div id="modal-show-page" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>


<p>
  <a class="btn btn-primary" data-toggle="modal" data-target="#modal-show-page" data-href="exito.html">Modal de Éxito</a>

  <a class="btn btn-warning" data-toggle="modal" data-target="#modal-show-page" data-href="error.html">Modal de Error</a>
</p>

If you notice, I have a single modal container, but two buttons that open it. Each button has a data-href attribute that points to another html that I'm going to load into the open modal using:

jQuery('#modales').find('#modal-show-page').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget);
    var href = button.data('href');
    var modal = $(this);
    jQuery.get(href).then(function(content) {
      modal.find('.modal-content').empty().append(content);
    });
  });

The content of modales.html does not exist before loading that html by ajax, so I am using delegation of events using the #modales container that does exist from the beginning.

I leave you a working plunkr.

score 0 · Answer 2

The simplest thing (in my opinion) is to do in the part of the html where you want to put the modal <?php include 'modalquesea.php';?> and in that external file .php you put the code of the modal. You should run it on a local server, it will not work if you simply open the file with the browser.

You can also do it with ajax, as they tell you, but if it's not going to be dynamic and it will always load the same modal on the same page, I think it's more "clean" to do it with php.

score 0 · Answer 3

I'm assuming you're using Bootstrap 3.

A good option is to create a div container in your main page where you will load your htmls static with the different modalities:

<div id="miModal" class="modal fade text-center">
    <div class="modal-dialog">
      <div class="modal-content">
      </div>
    </div>
  </div>

In this modal you will load the different htmls saying that the target is your div generic and that the href is the page you want to load in your modal:

<button href="pagina1.html" data-toggle="modal" data-target="#miModal">Open One</button>
<button href="pagina2.html" data-toggle="modal" data-target="#miModal">Open Two</button>

Also, when a modal is hidden you will have to delete both the modal itself and the content (if not, when creating the new modal, the previous content of the modal will be maintained for a moment):

$(this).removeData('bs.modal'); //Borramos la modal
$(this).find(".modal-content").empty(); //Vaciamos su contenido

I leave a demo working:

Demo