CODEWITHSUNDEEP
cssmeteormodal-dialog
Olivier
Olivier

Reputation: 11

How to display a simple HTML5/CSS3 modal on Meteor using template?

I would like to use the modal window model as described by Keenan Payne, made with HTML5 & CSS3. For that, I simply created two files: modal.html with the HTML Modal template & modal.scss with the styling description

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>

and simply invoke it through this simple 

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

This should be dead simple and I feel ashamed to ask for help, but the should be on top of any other windows, independently of my app layout? I must have missed something... Is there anything particular with Meteor that does prevent this from working right away?

Thanks for your help.

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;
}'

Upvotes: 0

Views: 269

Answers (2)

Olivier
Olivier

Reputation: 11

it looks like this is a known issue when using Iron Router package... what I do use. https://github.com/iron-meteor/iron-router/issues/711

Upvotes: 0

Alex Bierach
Alex Bierach

Reputation: 31

Is there a particular reason you want to use this technique? It's not clear from your question how it isn't working for you.

An alternative way to implement a modal in 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:

I can't really provide specific css because it will depend on the context of the modal, but one option is to position the modal absolutely with a z-index that is higher than anything else on the page:

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

This would be a full width, full height modal that will cover anything else on the page. If you make it transparent or less than full width/height, then it will appear on top of the content behind it.

What is happening here:

The user clicks an element with an event listener attached to it, in this case it is a button with a class of 'open-modal'.

This event listener changes the value of a boolean session variable, in this case it sets the 'modalOpen' session variable to 'true'.

There is a helper function in our parent template that is watching the session variable, and will update the template whenever that variable changes, effectively adding our modal to the DOM. In this case, we're using a 'modalOpen' helper to track the 'modalOpen' session variable, and when it notices it has changed to true, it updates the template with this value. {#if modalOpen}} in the parent template notices that 'modalOpen' has changed, and because it now evaluates to 'true', it will insert our 'modal' template, represented by {{> modal}}.

We close the modal by changing the 'openModal' session variable to 'false'.

Hope that helps, and no need to be ashamed, this stuff is hard to learn. Like anything the more you do it the easier it gets.

Upvotes: 1

Related Questions