Question

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

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

有没有人发现他的解决方案存在任何问题？当我点击bth模态的链接时没有任何反应。

<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) );
    });
})();

多个模态对话框

2 个答案: