使用表单元素(输入）初始化放大弹出菜单

Initializing Magnific Popup with form element (input)

本文关键字：放大 初始化 菜单 输入 表单 元素      更新时间：2023-09-26

我想要什么：

我想从HTML表单上的radio按钮初始化模式放大弹出菜单。然后弹出菜单将显示"发送"按钮。

实际上，我想通过单击单选输入的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元素、class、id）初始化弹出窗口。

好吧，我把这个问题搁置了一段时间，终于找到了解决方案。

我从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();
    });
});

你可以这样做

 $.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
           }
       }
 });
相关文章：