多模态对话框

Question

我正在尝试使用本教程中的多个情态函数：http://tympanus.net/codrops/2014/12/08/inspiration-dialog-effects/

如果你向下滚动到评论部分，你会看到Pedro Botelho发布了一个解决方案，但他的解决方案对我不起作用，他还没有回复一个解决方案。

有没有人看到他的解决方案有什么问题？当我单击bth modals的链接时，没有任何反应。

<div class="button-wrap"><button data-dialog="somedialog-1" class="trigger">Open Dialog</button></div>
<div class="button-wrap"><button data-dialog="somedialog-2" class="trigger">Open Dialog</button></div>

<div id="somedialog-1" 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>

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

(function() {

    [].slice.call( document.querySelectorAll( '[data-dialog]' ) ).forEach( function( trigger ) {
        var dlg = new DialogFx( document.getElementById( trigger.getAttribute( 'data-dialog' ) ) );

        trigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
    } );

})();

Answer 1

请试试我的。从http://bikehappy.org/modal.zip下载。我正在努力添加新特性。这就是我到目前为止所拥有的。

Answer 2

(function() {
    $('[data-dialog]').each( function(){
        var dlgtrigger = this,
            somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
            dlg = new DialogFx( somedialog );
        dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
    });
})();