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 theradio
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 anotheroption
, 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).