Question

所以我的代码的模态部分就是这个（来自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>

因此，在PLACE CONTENT HERE部分中，您可以放置模态的内容。所以我想要做的事情到现在为止我无法得到它是因为我希望这个模态包含我制作的单独文件的内容。使用该单独的文件，代码实际上非常长，我不想放置它或将其替换为PLACE CONTENT HERE部分或模态内容。如何在不模仿此模式内的文件的HTML / PHP代码的情况下使此模态包含单独文件的内容？例如。我有一个modal.php文件，其中包含模态代码，当我单击模态按钮时，我想显示我所做的另一个文件的内容，例如contents.php。谢谢。

Answer 1

您可以使用ajax方法，使用jQuery动态加载其他文件内容，试试这个：

<script>
jQuery(function(){
 jQuery(".modal-content").html("<p>Loading Please wait...</p>");
 jQuery(".modal-content").load('contents.php');//url to contents.php
});
</script>

如果你动态触发它，你可以使用

jQuery("button#modal_btn").modal();

Answer 2

你很幸运，我昨晚刚建了这样的东西。

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");
};

如果在模态加载

之后不需要加载js，请

删除loadModalScript

否则有两种方法可以解决它。

使用下面的loadModalScript函数动态引入js

或

使用主js文件存储所有内容并运行事件以附加dom 来自模态的对象

用法：loadModal("name of modal");

您可能还想运行与之关联的js。

在运行$ .getScript之前将其放在某处。我关闭异步以确保js在模式在DOM中后加载，如果您选择，可以在async:true后立即将其重新打开。

$.ajaxSetup({ async: false });

接下来我们加载脚本。

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"); }); };

最后，一个完整的init js文件。

var ModalJS = function () { var initModal = function() { console.log("I run when called"); } console.log(moduleId+".js running, vrrm vrrm"); return { init: function () { initModal(); } } }();

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

2 个答案: