css - 如何使用模板在 Meteor 上显示一个简单的 HTML5/CSS3 模态？

Question

我想使用 Keenan Payne 描述的模态窗口模型，它是用 HTML5 和 CSS3 制作的。为此，我简单地创建了两个文件:带有 HTML Modal 模板的 modal.html 和带有样式描述的 modal.scss

Modal.html
<template name="ModalSuggestion">         
  <a href="#openModal">Open Modal</a>
  <div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="closeModal">X</a>
        <h2>Modal Box</h2>
        <p>This is a sample modal box that can be created using the powers of CSS3.</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    </div>
  </div>
</template>

并通过这个简单的方式调用它

<a href="#openModal">{{> iconSuggest}}</a>
{{> ModalSuggestion}}

这应该非常简单，我很惭愧地寻求帮助，但它应该位于任何其他窗口之上，独立于我的应用程序布局？我一定错过了什么...Meteor 有什么特别之处会阻止它立即工作吗？

感谢您的帮助。

CSS

.modalDialog {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 99990; 
  opacity: 0;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  z-index: 99999;
}'

Answer 1

您想使用这种技术有什么特别的原因吗？从您的问题中不清楚它如何不适合您。

另一种在 meteor 中实现模态的方法:

HTML:

<template name="parentContainer">
  {{#if modalOpen}}
    {{> modal}}
  {{/if}}
  <div>Some content inside parent container</div>
  <button class="open-modal">Exit</button>
</template>

<template name="modal">
  <div class="modal-container">
    <div>Are you sure you want to exit?</div>
    <button class="confirm">Yes</button>
    <button class="cancel">No</button>
  </div>
</template>

Javascript:

Template.parentContainer.events({
  'click .open-modal' : function() {
    Session.set('modalOpen', true);
});

Template.parentContainer.helpers({
  modalOpen: function() {
    return Session.get('modalOpen');
  }
});

Template.modal.events({
  'click .confirm' : function() {
    Session.set('modalOpen', false);
    //closes modal
    //do something else
  };
  'click .cancel' : function() {
    Session.set('modalOpen', false);
    //just closes modal
  };
});

CSS:

我无法真正提供特定的 css，因为它取决于模态的上下文，但一种选择是使用高于页面上任何其他内容的 z-index 绝对定位模态:

.modal-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //z-index may be uncessary
  z-index: 1; (or higher if necessary)
}

这将是一个全宽、全高的模式，它将覆盖页面上的任何其他内容。如果您使其透明或小于全宽/高度，那么它将显示在其后面的内容之上。

这里发生了什么:

用户单击一个附加了事件监听器的元素，在本例中它是一个带有“open-modal”类的按钮。

此事件监听器更改 bool session 变量的值，在本例中它将“modalOpen” session 变量设置为“true”。

我们的父模板中有一个辅助函数，它正在监视 session 变量，并会在该变量发生变化时更新模板，有效地将我们的模态添加到 DOM 中。在这种情况下，我们使用“modalOpen”助手来跟踪“modalOpen” session 变量，当它注意到它已更改为 true 时，它​​会使用该值更新模板。父模板中的 {#if modalOpen}} 注意到“modalOpen”已更改，并且因为它现在评估为“true”，所以它将插入我们的“modal”模板，由 {{> modal}} 表示。

我们通过将“openModal” session 变量更改为“false”来关闭模态。

---

希望对您有所帮助，不要感到羞耻，这东西很难学。就像任何事情一样，你做的越多就越容易。