Question

我点击了一个链接，我显示了bootstrap模式。但是，我需要根据应用的条件在模态中显示动态内容。

JS：

     if (success) {
        $("#basicModal").modal('show').html("success"); //doesnt work
     }else if (error){
        $("#basicModal").modal('show').html("error"); //something like this, but doesnt work
     }

这是html：

 <a class="button-link" data-toggle="modal"  data-target="#basicModal">click to test</a>

    //bootstrap modal

     <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <h3>Modal Body</h3>
                    </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>
          </div>
        </div>

任何想法如何实现？谢谢！

Answer 1

您可以使用Meteor.startup(function(){ Router.route('/', { name : "dashboard", waitOn : function(){ if(!Meteor.loggingIn() && !Meteor.user()) { this.redirect("login"); } return Meteor.subscribe("collection_1") && Meteor.subscribe("collection_2") && Meteor.subscribe("collection_3") && Meteor.subscribe("collection_4"); }, onBeforeAction : function(){ if(!Meteor.loggingIn() && !Meteor.user()) { this.redirect("login"); } this.next(); }, action : function(){ this.render(); } }); });下面的事件来附加动态内容：

DEMO bootstrap

//change value of success to true or false to test the scenarios

如果您要清除所有内容并将其添加为新内容，则只需使用if (success) { $("#basicModal").on("shown.bs.modal", function () { //Tell what to do on modal open $(this).find('.modal-body').append('success') }).modal('show'); //open the modal once done }else if (error){ $("#basicModal").on("shown.bs.modal", function () { $(this).find('.modal-body').append('fail') }).modal('show'); }代替html，如下所示

append

Answer 2

在bootstrap中创建模态可能非常烦人。这就是我让BootboxJS（http://bootboxjs.com/）这样做的原因。从这里下载：https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js。您始终可以使用HTML

替换message和title

bootbox.dialog({
  message: "I am a custom dialog",
  title: "Custom title",
  buttons: {
    success: {
      label: "Success!",
      className: "btn-success",
      callback: function() {
        Example.show("great success");
      }
    },
    danger: {
      label: "Danger!",
      className: "btn-danger",
      callback: function() {
        Example.show("uh oh, look out!");
      }
    },
    main: {
      label: "Click ME!",
      className: "btn-primary",
      callback: function() {
        Example.show("Primary button");
      }
    }
  }
});

如何通过单击链接-Jquery / JS将动态内容添加到引导模式

2 个答案: