SimpleModal - функция обратного вызова не работает - при нажатии кнопки Да - PullRequest
Новая
       12

SimpleModal - функция обратного вызова не работает - при нажатии кнопки Да

0 голосов
/ 28 сентября 2011

Я хотел отправить пользовательское подтверждающее сообщение в SimpleModal. Но по щелчку Да, функция обратного вызова не запускается.

при нажатии кнопки закрытия, я хочу запустить простое модальное окно подтверждения. У меня есть много мест, где я хочу эту функциональность. Вот почему Динт хотел жестко закодировать сообщение внутри тега div. Пожалуйста, посмотрите код ниже и дайте мне знать, как я могу сделать эту работу. заранее спасибо . 

 jQuery(function($) {




        $('#btn').click(function(e) {

            e.preventDefault();

            // example of calling the confirm function
            // you must use a callback function to perform the "yes" action
            confirm("", function() {

                window.location.href = 'http://www.google.com/';
            });


        });



    });

    function confirm(message, callback) {

        // alert("1");
        $('body').append('<div id="container"><div id="confirm" style="display:none"><div class="header"><span>Confirm</span></div><div class="message">' + message + '</div><div class="buttons"><div class="no simplemodal-close">No</div><div class="yes">Yes</div></div></div><div style="display: none"><img src="skin/img/header.gif" alt="" /><img src="skin/img/button.gif" alt=""/></div></div>');
        $('#confirm').modal({
            closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
            resizable: false,
            position: ["20%", ],
            overlayId: 'confirm-overlay',
            containerId: 'confirm-container',
            onButtonClick: function(dialog) {
                var modal = this;

                // if the user clicks "yes"
                $('.yes', dialog.data[0]).click(function() {

                  //  call the callback
                                   if ($.isFunction(callback)) {

                                       callback.apply();
                                   }
                   // close the dialog


                    modal.close(); // or $.modal.close();
                });
            }
        });
    }

HTML-код ниже: 

<!DOCTYPE html>
<html>
<head>
    <title> Confirm Modal Dialog </title> 


    <!-- Confirm CSS files -->
    <link type='text/css' href='skin/confirm.css' rel='stylesheet' media='screen' />
    <!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<input id="btn" type='button' name='confirm'  value='Close' onclick="return confirm('Are you sure?');" />   

    <script type='text/javascript' src='jquery/jquery.js'></script>

    <script type='text/javascript' src='jquery/jquery.simplemodal.js'></script>

    <script type='text/javascript' src='jquery/confirm.js'></script>



</body>
</html>

1 Ответ

1 голос
/ 28 сентября 2011

Вы не должны добавлять код подтверждения на страницу с помощью jQuery. Добавляя его после загрузки DOM, плагин не может найти кнопку «.yes».

Ваш диалог уже должен быть на странице и установлен на «display: none». Следующий код заставит любую кнопку на вашей странице с классом «подтвердить» создать диалоговое окно подтверждения (при условии, что вы правильно включили все файлы JS плагина).

CSS: 

#confirm {display:none;}

HTML: 

<input type='button' class='confirm' value='Click to Confirm'/>

<!-- modal content -->
<div id='confirm'>
    <div class='header'><span>Confirm</span></div>
    <div class='message'></div>
    <div class='buttons'>
        <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
    </div>
</div>

JS: 

$('.confirm').click(function (e) {
    e.preventDefault();

    confirm("Confirm yes or no", function () {
        alert('yes clicked');
    });
});

Рабочий пример здесь: http://jsfiddle.net/YzRpP/2/

...