How would I use this

[sangyoo91]

How would I use this

[wbashir]

@sangyoo91 Sorry for not having created an official README but this package is a wrapper to the codrops dialog-effects package https://github.com/codrops/DialogEffects. You would use it in a similar fashion but I have modified the source code slightly to allow for explicit open and close functionality.

Example:

var $mainDlg = $('#dialog');
var dlg = new DialogFx($mainDlg);
dlg.open();   // to open the dialog 
dlg.close();  // to close the dialog

To create the dialog, I rendered a template using Blaze.render into any existing DOM element using the following markup.

<div id="somedialog" class="dialog">
    <div class="dialog__overlay"></div>
    <div class="dialog__content">
        <h2><strong>Howdy</strong>, I'm a dialog box</h2><
        div><button class="action" data-dialog-close>Close</button></div>
    </div>
</div>

[sangyoo91]

@warsamebashir Thank you so much! I'm still fairly new to Meteor. Would it work if I used, for say, {{> dialogConfirm}} and insert it to a template ?

[sangyoo91]

    'click .delete': function() {
      var $mainDlg = $('#dialog');
      var dlg = new DialogFx($mainDlg);
      dlg.open();

I am using this on Template.foo.events but the dialog would not open. Am I doing something wrong?

[wbashir]

@sangyoo91 Can you show me your Template and how you are inserting dialogConfirm? If the template exists and foo is being rendered, then the div#diailog element should exist allowing you to create the DialogFx object. Also check to see if you have any console errors in your browser?

[sangyoo91]

<template name = "foo">

{{ > dialogConfirm }}

<button class = "btn-primary delete">Delete</button>

</template>

This would be a minified thing of what I have now.

{{> dialogConfirm}}would be

<div id="dialog" class="dialog">
    <div class="dialog__overlay"></div>
    <div class="dialog__content">
       Something Here
        <div><button class="action" data-dialog-close>Close</button></div>
    </div>
</div>

[wbashir]

Are you at the latest version of this package 1.0.4, from what you have in your example, everything is set up correctly. The DialogFx object will accept a JQuery element or an HTML element and you can check to make sure dlg exists to verify object creation. Otherwise, I will need a reproducible project to test in order to further help