Question

我想要什么：

我想从HTML表单上的radio按钮初始化模式Magnific Popup。弹出窗口将显示＆＃34;发送＆＃34;按钮。

实际上，我想通过单击无线电输入的 label 来初始化弹出窗口，因为我将使用自定义CSS单选按钮替换无线电元素。

我使用Zepto因为它更轻，我不会使用jQuery。

问题是什么：

如果我点击label，我会获得一个Magnific模式，但radio选项不会被选中。
如果我点击radio按钮本身，选项会被选中并显示模式。但是，如果我关闭选择另一个 option的模式，则会显示模态而不更改选项。 （无论如何这都不可用，因为我会隐藏股票单选按钮 - 如前所述）。

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元素，类，ID）初始化弹出窗口。

Answer 1

好的，我把这个问题慢慢炖了一段时间，最后找到了解决方案。

我从input元素初始化弹出窗口：$('input').magnificPopup，这样我就可以在点击label时选择该选项。

我使用原生JavaScript重置表单控件using the method described in this SO answer：$('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();
    });
});

Answer 2

你可以这样做

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

使用表单元素（输入）初始化Magnific Popup

2 个答案: