Инициализация Magnific Popup с элементом формы (вход)

Question

Инициализация Magnific Popup с элементом формы (вход)

0

Что я хочу:

Я хочу, чтобы инициализировать модальный Magnific Popup от radio кнопки на HTML форме. Затем всплывающее окно отобразит кнопку "отправить".

Фактически, я хочу инициализировать всплывающее окно, нажав на label радиоввода, потому что я заменил радиоэлементы на пользовательские переключатели CSS.

Я использую Zepto, потому что он легче, и я не буду использовать jQuery иначе.

В чем проблема:

Если я нажимаю на label, я получаю Magnific modal, но опция radio не выбирается.
Если я нажимаю на radio кнопки сам, то вариант не выбран и появляется модальный. Но, если я отклоняю модальный option выбора другого option, модальность появляется без изменения опции. (В любом случае это невозможно использовать, потому что я скрою переключатели на складе - как упоминалось ранее).

Мой код: (http://jsfiddle.net/Nkc5X/)

HTML:

<form action="#">
    <label>
        <input type="radio" name="whatside" title="Left" value="Left">
        <span>Left</span>
    </label>

    <label>
        <input type="radio" name="whatside" title="Right" value="Right">
        <span>Right</span>
    </label>

    <div id="modal" class="white-popup-block mfp-hide">
        <h2>Modal dialog</h2>
            <button type="submit" value="Send">Send</button> 
        <a class="popup-modal-dismiss" href="#">Dismiss</a>
    </div>
</form>

JavaScript:

$(function () {
    $('label').magnificPopup({
        type: 'inline',
        items: {src: '#modal'},
        preloader: false,
        modal: true
    });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});

Что я пробовал:

У меня несколько испробованных вариантов на html/javascript безрезультатно. Я попытался инициализировать всплывающее окно, используя разные селекторы (label и элементы input, класс, идентификатор).

Daze 25 апр. 2014, в 18:16

Источник

0

Ну, похоже, он делает то, что вы хотите, кроме установки значения радио. Почему вы просто не делаете это для JS, когда на ярлык нажимают? или я что-то упустил?
Fonzy 30 апр. 2014, в 16:02
0

Спасибо @Fonzy, ваше предложение заставило меня задуматься о другом способе решения проблемы.
Daze 12 май 2014, в 12:35

Теги:

javascript

jquery

forms

magnific-popup

zepto

2 ответа

Ещё вопросы

Ну, похоже, он делает то, что вы хотите, кроме установки значения радио. Почему вы просто не делаете это для JS, когда на ярлык нажимают? или я что-то упустил?
Спасибо @Fonzy, ваше предложение заставило меня задуматься о другом способе решения проблемы.

Daze · Answer 1 · 2014-05-12T10-31-00.000Z

Хорошо, я оставил эту проблему тушить на некоторое время и, наконец, нашел решение.

Я инициализирую всплывающее окно из input элемента: $('input').magnificPopup, который позволяет мне выбрать параметр при нажатии на label.

Я сбрасываю элементы управления формы с помощью встроенного JavaScript, используя метод, описанный в этом ответе SO: $('form')[0].reset();

Рабочий JSFiddle здесь: http://jsfiddle.net/Nkc5X/1/

$(document).ready(function() {
    $('input').magnificPopup({
        type: 'inline',
        items: {src: '#modal'},
        preloader: false,
        modal: true
    });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
        $('form')[0].reset();
    });
});

Andrew Liu · Answer 2 · 2015-11-10T20-40-00.000Z

Вы можете сделать это так

 $.magnificPopup.open({
       items: {
            src: '<div class="my-container">here is the content of the html you want to popup</div>'
       },
       callbacks: {//this is optional
           close: function () {
                //do something on exit
           }
       }
 });