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

【问题标题】：Initializing Magnific Popup with form element (input)使用表单元素（输入）初始化 Magnific Popup
【发布时间】：2023-04-14 16:36:01
【问题描述】：

我想要什么：

我想从 HTML 表单上的 radio 按钮初始化模态 Magnific Popup。然后弹出窗口将显示“发送”按钮。

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

我使用 Zepto 是因为它更轻巧，否则我不会使用 jQuery。

有什么问题：

如果我点击 label，我会得到一个 Magnific 模式，但 radio 选项没有被选中。
如果我单击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 元素、类、id）初始化弹出窗口。

【问题讨论】：

嗯，它似乎做了你想做的事，除了设置收音机值。为什么在单击标签时不按 JS 执行此操作？还是我错过了什么？
感谢@Fonzy，您的建议让我想到了解决问题的不同方法。

标签： javascript jquery forms zepto magnific-popup

【解决方案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();
    });
});

【讨论】：

【解决方案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
           }
       }
 });

【讨论】：