Initializing Magnific Popup with form element (input)

Question

What I want:

I want to initialize a modal Magnific Popup from a radio button on an HTML form. The popup will then display the "send" button.

Actually, I want to initialize the popup by clicking on the label of the radio input because I'll replace the radio elements with custom CSS radio buttons.

I'm using Zepto because it's lighter and I wouldn't use jQuery otherwise.

What's the problem:

If I click on a label, I do get a Magnific modal, but the radio option doesn't get selected.
If I click on the radio button itself, the option does get selected and the modal appears. But, if I dismiss the modal to choose another option, the modal appears without changing the option. (This is not usable anyway because I'll hide the stock radio buttons — as previously mentioned).

My code: (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();
    });
});

What I've tried:

I've several tried variations on my html/javascript to no avail. I've tried initializing the popup using different selectors (label and input elements, class, id).

Well it seems like it does what you want it to do, except setting the radio value. Why dont you just do this per JS when the label is clicked? or am I missing something? — Fonzy, Apr 30 '14 at 16:02
Thanks @Fonzy, your suggestion made me think of a different way to approach the problem. — Daze, May 12 '14 at 12:35

score 2 · Answer 1 · edited May 23 '17 at 12:16

Okay, I left this problem simmer for a while and finally found a solution.

I initialize the popup from the input element: $('input').magnificPopup, which allows me to select the option when clicking on the label.

I reset the form controls using native JavaScript, using the method described in this SO answer: $('form')[0].reset();

Working JSFiddle here: 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();
    });
});

score 0 · Answer 2 · answered Nov 10 '15 at 22:13

You can do it like this

 $.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
           }
       }
 });

Initializing Magnific Popup with form element (input)

2 Answers2