如何将页面连接到模态而不是将页面内容放在模态中

Question

So I have a modal part of my code which is this (from Twitter Boostrap)

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"     aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      PLACE CONTENT HERE
    </div>
 </div>
</div>

So in the PLACE CONTENT HERE part, that's where you place the content of your modal. So what I am trying to do and up until now I wasn't able to get it is that I want this modal to contain the content of a separate file that I made. With that separate file, the code is actually very long and I do not want to place it or replace it on the PLACE CONTENT HERE part or modal-content. How can I make this modal contain the contents of a separate file without copying the HTML/PHP code of the file inside this modal? For example. I have a modal.php file where it contains the modal code and when I click the modal button, I want to show the contents of the other file that I made for example, contents.php. Thank you.

Answer 1

you are in luck, I just built something like this last night.

var loadModal = function(id){
    console.log("loading modal "+id);
    $("#modal-container").load("/modals/"+id+".php", function(){
        console.log("loaded "+id+" modal");
        //loadModalScript(id); //**SEE COMMENT RE: THIS
    }).hide().fadeIn("fast");
};

remove loadModalScript if you don't need to load js after the modal loads

otherwise there's 2 ways to go about it.

• use the loadModalScript function below to dynamically bring in js as needed

or

• use the main js file to store everything and run events to attach dom objects from modal

usage: loadModal("name of modal");

you may want to run js associated with it also.

put this somewhere before you run $.getScript. I turn off async to make sure the js loads after the modal is in the DOM, you can turn it back on async:true right after if you choose to.

$.ajaxSetup({
     async: false
 });

next we load the script.

var loadModalScript = function(id){
        $.getScript("/scripts/"+id+".js")
            .done(function( script, textStatus ) {
                //console.log("loadmodscript success", script, textStatus);
                console.log("module script loaded successfully");
                AdminModule.init();
            })
            .fail(function( jqxhr, settings, exception ) {
                //console.log("loadmodscript failed", jqxhr, settings, exception);
                console.log("module script failed to load");
            });
    };

and finally, a bare js file complete with init.

var ModalJS = function () {
    var initModal = function() {
        console.log("I run when called");
    }

    console.log(moduleId+".js running, vrrm vrrm");
    return {
        init: function () {
            initModal();
        }
    }
}();