繁体   English   中英

成功时,ajax激活弹出窗口

[英]ajax activate pop up upon success

有一个用以下代码激活的弹出对话框:

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

单击按钮后弹出窗口即可激活的代码如下:

<script src="js/classie.js"></script>
<script src="js/dialogFx.js"></script>
<script>
    (function() {

        var dlgtrigger = document.querySelector( '[data-dialog]' ),
            somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
            dlg = new DialogFx( somedialog );

        dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

    })();
</script>

从而触发按钮具有数据属性data-dialog =“ somedialog”。

对话框本身的html代码在这里:

<div id="somedialog" class="dialog">
                    <div class="dialog__overlay"></div>
                    <div class="dialog__content">
                        <div class="morph-shape">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 560 280" preserveAspectRatio="none">
                                <rect x="3" y="3" fill="none" width="556" height="276"/>
                            </svg>
                        </div>
                        <div class="dialog-inner">
                            <h2><strong>Howdy</strong>, I'm a dialog box</h2>
                            <div><button class="action" data-dialog-close>Close</button></div>
                        </div>
                    </div>
                </div>

注意 :对话框和激活它的按钮都共享属性“ somedialog”

但是,我想将弹出窗口与ajax集成在一起,这样当ajax返回成功/完成时,该弹出窗口会自动被调用(无绑定)。 我的ajax代码正在运行,并且弹出窗口的HTML / CSS代码也已经编码。

问题是在ajax成功后如何将按钮激活转换为自动激活?

谢谢!

基本上dlg.toggle.bind(dlg)具有单击功能。

像这样触发

dlg.toggle.bind(dlg)()

工作提琴

答案实际上是在ajax代码中仅添加这两行以追加新的模式:

window.dlg =新的DialogFx(window.somedialog); dlg.toggle.bind(dlg)();

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM