Bootstrap 3模态模式与Ember.js [英] Bootstrap 3 modal pattern with Ember.js

问题描述

这是我试图将我的代码基于（基于Bootstrap〜2）：

Here is what I'm trying to base my code on (based on Bootstrap ~2):

http://jsfiddle.net/marciojunior/tK3rX/

<script type="text/x-handlebars" data-template-name="application">
    <h1>Boostrap modal sample</h1>    
    <a {{action showModal}} href="#">Open modal</a>
</script>

<script type="text/x-handlebars" data-template-name="modal">
<!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button>
          <h4 class="modal-title">{{view.title}}</h4>
        </div>
        <div class="modal-body">
          <p>{{view.content}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" {{action close target="view"}} 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 -->
</script>

这是我的jsfiddle与Bootstrap 3：

And this is my jsfiddle with Bootstrap 3:

http://jsfiddle.net/5R8U9/9/

有人可以帮我找到我的小提琴吗？

Could anyone help me find the problem with my fiddle?

推荐答案

你的问题是使用css：

Your problem is with css:

在您的 ModelView 中，您有 classNames：[modal，fade 隐藏]，。您必须删除隐藏类。

In your ModelView you have classNames: ["modal", "fade", "hide"],. You must remove the hide class.

在模板中有另一个问题。您正在使用 modal 和褪色。由于您已经在 ModelView 中指定了它，所以这是不必要的。

In the template you have another problem. Your are using the modal and fade again. Since you have specified it already in ModelView, this is unnecessary.

模板

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

当创建视图时，结果将为2 模态类，布局将被破坏：

Becaues when the view is created the result will be 2 modal classes and the layout will be broken:

<div class="modal fade ember-view" >
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

最后的结果是这个 http://jsfiddle.net/marciojunior/rrXc2/

这篇关于Bootstrap 3模态模式与Ember.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！