Question

我有一些ASP代码，我试图通过Magnific Popup显示/隐藏，通过从页面传递div作为源。

<a href="#import-popup" ToolTip="Import New Proposal" class="open-popup-link">Insert New Record</a>
<div id="import-popup" class="white-popup mfp-hide">
    <span>Proposal to Import:</span>
    <asp:TextBox ID="txtPropNum" runat="server" />
    <asp:Button ID="btnImport" runat="server" Text="Import" OnClick="btnImport_Click" />
</div>

JS：

$(document).ready(function () {
    $('.open-popup-link').magnificPopup({
        type: 'inline',
        midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    });
})

div显示并隐藏得非常好。我似乎无法让asp:Button id="btnImport"实际触发它的功能（现在它是MsgBox来显示asp:TextBox的内容。事实上，我甚至没有在我的Web控制台中看到发布/获取请求。

然而，按钮在没有位于div内部时工作正常，TextBox甚至可以从后面的代码访问，所以我知道我的实际点击功能正在工作。可能会发生什么想法？ Magnific以某种方式阻止了回发吗？

Answer 1

如果您使用的是最新版本的.magnificPopup，则可以使用新的prependTo方法，并在设置时发送.net表单ID。

   $('.popup-with-form').magnificPopup({
                type: 'inline',
                preloader: false,
                focus: '#name',
                prependTo: $('#form1'),

Answer 2

我能找到的唯一解决方案（因为我没有在API中看到任何选项）是修改核心代码（哎呀！）。

我换了一行：

// add everything to DOM
mfp.bgOverlay.add(mfp.wrap).prependTo( document.body );

为：

// add everything to DOM
mfp.bgOverlay.add(mfp.wrap).prependTo( $('#form1') );

其中form1是我的表单元素的ID。

Answer 3

我将弹出窗口的内容移动到它自己的页面，然后通过iframe类型调用magnific，如下所示：

JS：

$(document).ready(function () {     
    $('.open-popup-link').magnificPopup({
        type: 'iframe',
        iframe: {
            markup: '<div class="mfp-iframe-scaler" style="width:100px; height:100px;">'+
                    '<div class="mfp-close"></div>' +
                    '<div class="custom-mfp-border">'+
                    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
                    '</div>'+
                    '</div>'
            },
        midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.

    });

})

父页面：

<a href="/Proposals/ImportProposal.aspx" ToolTip="Insert New Record from ACT" class="open-popup-link">Insert New Record</a>

然后我的子页面基本上就是我在问题中发布的<div>。

Answer 4

添加prependTo：$（'＃form1'）为我工作！使用VS 2010

内部的回发没有开火

4 个答案: