【问题标题】：bootstrap modal as jquery object引导模式作为 jquery 对象
【发布时间】：2015-11-20 13:18:04
【问题描述】：

使用bootstraps modal的例子

<div class="modal fade">
  <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我想知道是否有办法做到这一点，通过jQuery 实现某种动态。

我的目标是拥有一个类似于名为$theModal 的变量，它将被初始化并具有用于获取/设置标题、内容、单击保存/取消/关闭时要调用的 javascipt 函数等的属性。

应该全部通过jQuery 生成，还是应该在代码中有标记并使用 ids/custom data-attributes 来捕捉模态？

也许是一些类结构？

var $theModal = new MyModal();

下一个问题是，如果模态已经打开，如何创建一个克隆？

我会做出/猜测

var $theClone = $theModal.clone().init();

$theClone.title = "Title of the second modal";
$theClone.content = $.ajax(url);
$theClone.saveAction = saveTheContentOfTheContent;
$theClone.show();

这是可能的还是我的假设完全错误？

【问题讨论】：

标签： javascript jquery twitter-bootstrap modal-dialog bootstrap-modal

【解决方案1】：

你的想法还不错，但是……

您的 html 代码中可以有一个模式。然后在您的标题所在的空间中，您可以使用 $scope 类型。

然后在你的 js 文件中，你可以在数组中指定你想要的字符串，然后在 ng-click 函数的参数中更改为你想要的字符串。

index.html

<p>This is the modal view.</p>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">{{msgArray.title}}</h4>
        </div>
        <div class="modal-body">
          <p>{{msgArray.body}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{{msgArray.btn}}</button>
        </div>
      </div>

    </div>
  </div>

script.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
      $scope.msgArray1 = {
        title : "Modal 1",
        body: "This is the co to say anything you want here.",
        btn : "Close",
    };
     $scope.msgArray2 = {
        title : "Modal 2",
        body: "This is the co to say anything you want here.",
        btn : "Close",
    };

        $scope.msgTemp = {
        title : "",
        body: "",
        btn : "",
    };

    $scope.openModal = function(modal){

      if(modal == "modal1"){
        $scope.msgTemp = $scope.msgArray1;
      }
              if(modal == "modal2"){
        $scope.msgTemp = $scope.msgArray2;
      }

      $("#myModal").modal('show');

    }

});

http://plnkr.co/edit/nV3iq1U1ymcsBAXT6g2y?p=preview

【讨论】：

【解决方案2】：

你的想法很好，已经被somene实现了。查看this link

此链接向您展示了可以使用您的想法的所有可能的案例场景。它还具有一些我们甚至没有想到的强大功能。

【讨论】：