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

Что я хочу:

Я хочу инициализировать модальное Magnific Popup с помощью кнопки radio в HTML-форме. Во всплывающем окне появится кнопка «Отправить».

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

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

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

  1. Если я нажму на label, я получу модальное окно Magnific, но опция radio не будет выбрана.
  2. Если я нажму на саму кнопку radio, опция будет выбрана и появится модальное окно. Но, если я закрываю модальное окно, чтобы выбрать другое 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, класс, идентификатор).


javascript forms jquery zepto magnific-popup
person Daze    schedule 25.04.2014    source источник
comment
Ну, похоже, он делает то, что вы хотите, за исключением установки значения радио. Почему бы вам просто не сделать это для JS при нажатии на метку? или я что-то упускаю?   -  person Fonzy    schedule 30.04.2014
comment
Спасибо @Fonzy, ваше предложение заставило меня подумать о другом подходе к проблеме.   -  person Daze    schedule 12.05.2014

Ответы (2)


arrow_upward
1
arrow_downward

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

Я инициализирую всплывающее окно из элемента 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();
    });
});
person Daze    schedule 12.05.2014

arrow_upward
0
arrow_downward

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

 $.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
           }
       }
 });
person Andrew Liu    schedule 10.11.2015