2

我正在尝试在 Polymer-Element 中实现 Bootstrap 模态。我尝试了几种方法，但收效甚微。任何建议，将不胜感激。我仍在尝试围绕所有这些新标准进行思考，所以我确定我遗漏了一些东西。

我想要什么

<body>
  <x-foo></x-foo> 
</body>

x-foo 有 x-bar 的地方

<polymer-element name="x-foo" extends="div">
  <template>
    <x-bar></x-bar>
  </template>
  <script>
    Polymer('x-foo', {
      // goodness
    })
  </script>
</polymer-element>

<polymer-element name="x-bar">
  <template>
    <style>
        .modal {
           // local style
        }
    </style>
    <div class="modal fade">
       <!-- ... rest of Bootstrap Modal tags / content -->
       <div id="awesome" on-click="awesome"></div>
    </div>
  </template>
  <script>
    Polymer('x-bar',{
      ready : function() {
        window.$(this.$.modal).modal({show:false});
      },
      show : function() {
        window.$(this.$.modal).modal('show');
      },
      awesome : function() {
        alert('awesome');
      }
    });
  </script>
</polymer-element>

现在这行得通，有点。在 x-bar 上调用 show() 将显示弹出窗口，但不会显示本地样式。样式未显示是有意义的，因为 bootstrap.js 已删除 div.modal 并将其附加到主体。但是 div.awesome 的点击处理程序永远不会触发。

现在我尝试了几种变化，结果都相似。请注意，我不依赖于引导模式。但我对实现此标签的最佳实践和/或如何实现附加到主体以进行显示的自定义弹出窗口感兴趣（当然还有所有的 Web 组件优点）。

4

0 回答 0