0

i'm looking to open a modal using bootstrap 4. If I check the documentation, this is working fine.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      Open modal
    </button>
    
    
    <!-- The Modal -->
    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
    
          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
    
          <!-- Modal body -->
          <div class="modal-body">
            Modal body..
          </div>
    
          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
    
        </div>
      </div>
    </div>

But in fact I would like to call the modal from a different page. It means myModal should not be on the same page than the button. But all I tried failed. Do you have any idea ? Thanks

Moreover I would like to use a link with <a href=....></a> instead of button.

To be more specific; here ic what I really have, (was working with bootstrap 2 and I try to make it work with bootstrap 4) but it's not working or at least not as expected.

Page 1

<a class="btn btn-mini btn-info avia-modal" href="PAGE_MODAL_URL"></a>

js side

$(".avia-modal").click( function() {
    ouvrirModal(this);
    $("#idurl").val($(this).attr('rel'));
} );


/**
 * Fonctions popup modal
 */
function ouvrirModal(elt){
    href = $(elt).prop("href");

    $('#aviaModal').modal();

    $('#aviaModal iframe.modal-body').prop("src", href);

    $('#aviaModal iframe.modal-body').removeClass("d-none");
    $('#aviaModal div.modal-body').addClass("d-none");

}

/**
 * itialisation modal
 */
function initModal(btnSave){
    if(btnSave){
        $("#aviaModal .avia-btn-save").removeClass("d-none");
        $("#aviaModal .avia-btn-save").click( function() {
            window.frames["iframemodal"].window.saveAction();
        });
    }
}

/**
 * Réinitialisation modal
 */
function resetModal(){
    $("#aviaModal .avia-btn-save").addClass("d-none");
    $('#aviaModal').modal('d-none');
}

 $(document).ready(function(){
    parent.$("#aviaModal .modal-header h3").html("Historique");
    parent.$("#aviaModal").addClass("modal-historique");
});
  • You need more context for this question. Do you not want the HTML on the same page: You could inject with javascript. Do you want to make a template file containing the modal html: You need to serve that from the server and load it up with Javascript. If you provide more context people can help you better. – Terrance00 Jul 26 '18 at 08:05
  • The modal is inside a template indeed. She can't be on the same page. How can I inject it ? –  Jul 26 '18 at 08:07
  • Try to inject iframe with JavaScript may be OK, but aware of the cross domain issue – Terry Wei Jul 26 '18 at 08:12
  • You pass a GET variable. and in another page get the variable and trow a trigger with js – Mulet Enguix Jul 26 '18 at 08:13
  • Possible duplicate of [Getting Bootstrap's modal content from another page](https://stackoverflow.com/questions/32958219/getting-bootstraps-modal-content-from-another-page) – Dinesh Ghule Jul 26 '18 at 08:16
  • Possible duplicate of [Bootstrap 4 with remote Modal](https://stackoverflow.com/questions/34763090/bootstrap-4-with-remote-modal) – Zac Jul 26 '18 at 08:47

2 Answers2

0

Why don’t you iframe a pop up window with the desired page you want to output.

Hamad Rakshani
  • 115
  • 2
  • 11
0

One way to do it is to link to a page that executes a javascript on a certain condition, that opens the modal for you.

Another way is to create a single page application using React, Angular or Vue.

From a UX-perspective however, nobody will expect to change a page as well as open a modal. Probably there are ways that are easier and more common in their approach.

Webber
  • 4,672
  • 4
  • 29
  • 38
  • Actually i am migrating existing modals from bootstrap 2 to bootstrap 4. And they were all done in separate templates. So I can't really change this without breaking the whole api. –  Jul 26 '18 at 08:12
  • 1
    Depend on what you said above, I think the main question is how to transfer bootstrap 2 to bootstrap 4, isn't it? If so, create a new question. – Terry Wei Jul 26 '18 at 08:16