Css и Jquery (модальное ...

[Jack Daniels]

Всем привет.
Подскажите пожалуйста как можно вывести две кнопки(#win1 и #win2) с разным содержимым через модальное окно SimpleModal (Confirm Override).
Как-то класс чтоли нужно каждой кнопке присвоить, но голову уже сломал и не могу никак понять как это сделать.
Получается, что если выводишь(дублируешь) такую же вторую кнопку, но с другим текстом, то ее содержимое(текст) повторяется из первой кнопки

Мой код

<link rel="stylesheet" href="/js/confirm.css">
<script src="/js/jquery.simplemodal.js" type="text/javascript"></script>
<script src="/js/confirm.js" type="text/javascript"></script>

<dl id='confirm-dialog'>
<a href='#win1' class='confirm'>Кнопка</a>
</dl>

<div id='confirm'>
<div class='header'><span>Заголовок</span></div>
<div class='message'>Текст</div>
<div class='buttons'>
<div class='no simplemodal-close'><input class="button OverlayCloser" type="button" accesskey="r" value="Закрыть"></div>
</div>

[свернуть]

[OKyJIucT]

Извиняюсь, не то сначала посмотрел)) Вот к вашему примеру рабочие правки:

HTML

Код:

<div id='confirm-dialog2'>
    <h3>Confirm Override</h3>
    <p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of the <code>onShow</code> callback as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
    <input type='button' name='confirm2' class='confirm2' value='Demo'/> or <a href='#' class='confirm2'>Demo</a>
</div>


<!-- modal content -->
<div id='confirm2'>
    <div class='header'><span>Confirm123</span></div>
    <div class='message'></div>
    <div class='buttons'>
        <div class='no simplemodal-close'>No123</div><div class='yes'>Yes123</div>
    </div>
</div>

JS (confirm.js, просто добавьте в конец файла)

Код:

jQuery(function ($) {
    $('#confirm-dialog2 input.confirm2, #confirm-dialog2 a.confirm2').click(function (e) {
        e.preventDefault();


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


function confirm2(message, callback) {
    $('#confirm2').modal({
        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
        position: ["20%",],
        overlayId: 'confirm-overlay',
        containerId: 'confirm-container', 
        onShow: function (dialog) {
            var modal = this;


            $('.message', dialog.data[0]).append(message);


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

CSS (confirm.css)

Код:

#confirm, #confirm2 {display:none;}

[Jack Daniels]

OKyJIucT, всё работает, огромнейшее спасибо
Как ни странно, но только заметил, что не работает закрытие окна при нажатии на фон, только на кнопке и кресте есть какая то возможность исправить?
Автор на почту не отвечает, пытался сравнить его другие скрипты, которые имеют эту функцию, но попытки без успешны

[OKyJIucT]

Jack Daniels, на демке они тоже не работают) в JS не силен, поэтому не подскажу, как сделать, чтобы починить. Могу посоветовать использовать Twitter Bootstrap - там в JS модулях есть Modal - при клике на фон окно закрывается. Настраивать несколько окон еще проще. Там достаточно толкко id прописать для каждого уникальное и все, в CSS и JS рыться не надо. Вот вам рабочий пример:

Скрытый текст (вы должны зарегистрироваться или войти под своим логином):

У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.

либо вот вам рабочий код с двумя окнами

Скрытый текст (вы должны зарегистрироваться или войти под своим логином):

У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.

Главное, чтобы тут были одинаковые название, и все) Скрипт сделает все остальное за вас