3

我有一些 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 控制台中记录了 post/get 请求。

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

4

4 回答 4

3

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

   $('.popup-with-form').magnificPopup({
                type: 'inline',
                preloader: false,
                focus: '#name',
                prependTo: $('#form1'),
于 2015-01-26T15:07:42.267 回答
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。

于 2013-07-25T17:34:50.240 回答
2

我最终将弹出窗口的内容移动到它自己的页面，然后通过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>我在问题中发布的。

于 2013-07-25T17:46:06.797 回答
0

添加 prependTo: $('#form1') 对我有用！使用 VS 2010

于 2015-04-08T14:23:32.290 回答