Как я могу всплывающее окно динамического подтверждения, используя простой модальный - PullRequest
0 голосов
/ 06 августа 2009

Я использую простую модель, которая представляет собой очень аккуратный кусок кода, но у меня есть одно требование, которое я не могу понять.

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

Мой вариант использования - третий вариант, когда я хочу всплывающее окно «Подтверждение» после того, как пользователь нажимает на действие. Проблема в том, что в примере сообщение жестко закодировано в файле js.

мне нужно иметь возможность передать это сообщение, а также ссылку, связанную с кнопками «Да» и «Нет».

кто-нибудь делал что-нибудь подобное.

Ответы [ 3 ]

3 голосов
/ 06 августа 2009

Глядя на источник страницы говорит вам все, что вам нужно знать.

<!-- 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 вообще.

И если мы тогда посмотрим на источник JS файла verify.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();
            });
        }
    });
}
0 голосов
/ 07 августа 2009

Код, указанный в файле verify.js, содержит два определения метода. Одним из них является общий метод с именем confirm, который создает модальное всплывающее окно с сообщением, которое вы хотите отобразить. Вы должны использовать этот метод всякий раз, когда хотите создать модальное всплывающее окно.

confirm("Are you sure you want to delete this item?", function() {
    //Here you will write the code that will handle the click of the OK button.
});

Здесь вторым аргументом является функция (это работает почти как делегат в C #). Что произойдет, так это то, что функция confirm покажет диалоговое окно с вашим сообщением, и когда пользователь нажмет любую кнопку, будет вызвана анонимная функция, переданная в качестве второго аргумента. Вы также можете написать «нормальную» функцию и передать ее в качестве второго аргумента confirm -

function callbackHandler() {
    //Here you will write the code that will handle the click of the OK button.
}

confirm("Are you sure you want to delete this item?", callbackHandler);

Эта функция будет вызывать вашу функцию -

// if the user clicks "yes"
dialog.data.find('.yes').click(function () {
    // call the callback
    if ($.isFunction(callback)) { callback.apply(); }
    // close the dialog
    $.modal.close();
});
0 голосов
/ 06 августа 2009

Я бы порекомендовал BlockUI, который я использую. Этот плагин использует существующее значение <div> для отображения сообщения. В случае, если диалоговое окно запускается, вы можете использовать jQuery для изменения сообщения и текста ссылки с помощью обычной манипуляции с DOM, прежде чем он покажет <div>, как требует ваше приложение.

Плагин jQuery BlockUI - Пример диалога

РЕДАКТИРОВАТЬ - в соответствии с первым комментарием ниже.

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#test').click(function() { 
        $.blockUI({ message: $('#question'), css: { width: '275px' } }); 
    }); 

    $('#yes').click(function() { 
        // Remove the UI block.
        $.unblockUI(); 
        //  Or you could use window.open
        window.location = "http://www.google.com";
    }); 

    $('#no').click(function() { 
        $.unblockUI(); 
        return false; 
    }); 
}); 

...