引导模态作为jquery对象

bootstrap modal as jquery object

本文关键字：jquery 对象 模态      更新时间：2023-09-26

使用bootstrap的例子

<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的变量，它将被初始化，并具有属性，用于获取/设置标题，内容，点击保存/取消/关闭时要调用的javascript函数等。

应该全部通过jQuery生成，还是我应该在代码中使用标记并使用id/自定义数据属性来捕获模式?

也许是一些类结构?

var $theModal = new MyModal();

下一个问题是，如何创建一个克隆的情况下模态已经打开?

I would make/guess

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

这是可能的还是我的假设完全错了?

你的主意不错，但是……

你可以有一个模态在你的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 h1> http://plnkr.co/edit/nV3iq1U1ymcsBAXT6g2y?p =预览

你的想法很好，而且已经有人实现了。查看此链接

这个链接向你展示了你的想法可以被使用的每一个可能的情况。它还有一些我们甚至没有想到的强大功能

相关文章：