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

(Ответов: 3, Просмотров: 2186)
  1. Новичок
    • Регистрация: 16.03.2013
    • Сообщений: 15
    • Репутация: 0
    Всем привет.
    Подскажите пожалуйста как можно вывести две кнопки(#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>

    [свернуть]
    Последний раз редактировалось Jack Daniels; 07.03.2014 в 22:46.
    • 0
  2. Sunshine reggae Аватар для OKyJIucT
    • Регистрация: 02.09.2011
    • Сообщений: 3,240
    • Репутация: 1830
    • Webmoney BL: ?
    Извиняюсь, не то сначала посмотрел)) Вот к вашему примеру рабочие правки:

    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;}
    Последний раз редактировалось OKyJIucT; 08.03.2014 в 00:08.
    • 2

    Спасибо сказали:

    DESTER(21.03.2014), Jack Daniels(08.03.2014),
  3. Новичок
    • Регистрация: 16.03.2013
    • Сообщений: 15
    • Репутация: 0
    OKyJIucT, всё работает, огромнейшее спасибо
    Как ни странно, но только заметил, что не работает закрытие окна при нажатии на фон, только на кнопке и кресте есть какая то возможность исправить?
    Автор на почту не отвечает, пытался сравнить его другие скрипты, которые имеют эту функцию, но попытки без успешны
    • 0
  4. Sunshine reggae Аватар для OKyJIucT
    • Регистрация: 02.09.2011
    • Сообщений: 3,240
    • Репутация: 1830
    • Webmoney BL: ?
    Jack Daniels, на демке они тоже не работают) в JS не силен, поэтому не подскажу, как сделать, чтобы починить. Могу посоветовать использовать Twitter Bootstrap - там в JS модулях есть Modal - при клике на фон окно закрывается. Настраивать несколько окон еще проще. Там достаточно толкко id прописать для каждого уникальное и все, в CSS и JS рыться не надо. Вот вам рабочий пример:

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


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

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


    Главное, чтобы тут Нажмите на изображение для увеличения.  Название:	1394307528-clip-96kb.jpg  Просмотров:	6  Размер:	95.5 Кб  ID:	13918 были одинаковые название, и все) Скрипт сделает все остальное за вас
    • 1

    Спасибо сказали:

    Jack Daniels(09.03.2014),

Похожие темы

Темы Раздел Ответов Последний пост
Всплывающее окно, как на vk.com/topmelody
Вопросы от новичков 4 16.05.2013 01:47
Всплывающее окно подписка
Web программирование 2 01.05.2013 02:35
Прыгающее окно браузера
Оффтоп и свободные темы 1 03.04.2013 12:10

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры