Fatal编程技术网

Twitter bootstrap 使用主干启动引导模式

twitter-bootstrap backbone.js

Twitter bootstrap 使用主干启动引导模式,twitter-bootstrap,backbone.js,modal-dialog,Twitter Bootstrap,Backbone.js,Modal Dialog,用主干网启动一个引导模式已经被证明是一个巨大的麻烦 以下是我的HTML文件中的内容： <body> <div id="teamSnapImportDiv"></div> <script> function importFromTeamSnap(event) { event.preventDefault(); alert('agegage'); var aimportTeamSnapView

用主干网启动一个引导模式已经被证明是一个巨大的麻烦

以下是我的HTML文件中的内容：

<body>
<div id="teamSnapImportDiv"></div>
<script>

    function importFromTeamSnap(event) {
        event.preventDefault();
        alert('agegage');
        var aimportTeamSnapView = new importTeamSnapView({el: $("#teamSnapImportDiv")});
        var rendered = aimportTeamSnapView.render();
        //$(rendered.el).appendTo(this.$el).hide().fadeIn().slideDown();
    };

</script>


<script type="text/html" id="teamsnap-import-template">

        <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 id="cancelTeamSnapImport" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button id="confirmTeamSnapImport" type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


</script>
</body>
我到底需要做什么才能让这一切顺利进行？我可以让其他东西工作，但模态的东西不工作。其他示例没有明确说明需要做什么，或者为什么。

尝试使用

模态JS

var BaseModalView = Backbone.View.extend({

    id: 'base-modal',
    className: 'modal fade hide',
    template: 'modals/BaseModal',

    events: {
      'hidden': 'teardown'
    },

    initialize: function() {
      _(this).bindAll();
      this.render();
    },

    show: function() {
      this.$el.modal('show');
    },

    teardown: function() {
      this.$el.data('modal', null);
      this.remove();
    },

    render: function() {
      this.getTemplate(this.template, this.renderView);
      return this;
    },

    renderView: function(template) {
      this.$el.html(template());
      this.$el.modal({show:false}); // dont show modal on instantiation
    }
 });
把手模板

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Close</a>
      <a href="#" class="btn btn-primary">Save changes</a>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
这对于解决这个问题非常有效

不幸的是，这是另一个库，但它可以工作。

您可能需要使用
$（“#Teamsnapportdiv modal”）手动显示动态添加元素的模式。modal（）
是的，我已经看到了这个示例，将再次尝试使用它，谢谢 
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Close</a>
      <a href="#" class="btn btn-primary">Save changes</a>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

modalView = new BaseModalView();
modalView.show();

// Modal view automatically bound to the body and removes itself on hidden;