javascript - 我如何使用简单的模态动态确认弹出窗口

我正在使用简单的模型，这是一段非常整洁的代码，但是我有一个我不知道的要求。

http://www.ericmmartin.com/simplemodal/

我的用例是用户单击操作后希望“确认弹出”的第三个选项。问题是在示例中，消息是硬编码在js文件中的。

我需要能够传递此消息以及与“是”和“否”按钮关联的链接。

有没有人做过类似的事情。

最佳答案

查看页面的源代码可以告诉您所有您需要了解的内容。

<!-- Confirm -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script src='js/confirm.js' type='text/javascript'></script>

和

<div id='confirmDialog'><h2>Confirm Override</h2>

    <p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of <code>onShow</code> as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
    <form action='download/' method='post'>
        <input type='button' name='confirm' value='Demo' class='confirm demo'/><input type='button' name='download' value='Download' class='demo'/>
        <input type='hidden' name='demo' value='confirm'/>
    </form>
</div>
<div id='confirm' style='display:none'>

    <a href='#' title='Close' class='modalCloseX simplemodal-close'>x</a>
    <div class='header'><span>Confirm</span></div>
    <p class='message'></p>
    <div class='buttons'>
        <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
    </div>
</div>

在上面，我们可以清楚地看到消息传递全部在HTML中，而不是在javascript中。

然后，如果我们看一下Confirm.js的JS源代码，那么它们在如何初始化/触发方面都已为您列出。

/*
 * SimpleModal Confirm Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2009 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: confirm.js 185 2009-02-09 21:51:12Z emartin24 $
 *
 */

$(document).ready(function () {
    $('#confirmDialog input.confirm, #confirmDialog a.confirm').click(function (e) {
        e.preventDefault();

        // example of calling the confirm function
        // you must use a callback function to perform the "yes" action
        confirm("Continue to the SimpleModal Project page?", function () {
            window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
        });
    });
});

function confirm(message, callback) {
    $('#confirm').modal({
        close:false,
        position: ["20%",],
        overlayId:'confirmModalOverlay',
        containerId:'confirmModalContainer',
        onShow: function (dialog) {
            dialog.data.find('.message').append(message);

            // if the user clicks "yes"
            dialog.data.find('.yes').click(function () {
                // call the callback
                if ($.isFunction(callback)) {
                    callback.apply();
                }
                // close the dialog
                $.modal.close();
            });
        }
    });
}

关于javascript - 我如何使用简单的模态动态确认弹出窗口，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1239566/