JQuery 模态弹出窗口答案

【问题标题】：JQuery Modal PopupJQuery 模态弹出窗口
【发布时间】：2012-07-24 19:06:09
【问题描述】：

我正在尝试在 asp.net 页面上单击按钮后出现一个模态弹出窗口。

   <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestFile.ascx.cs" Inherits="TestFile" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.IO" %>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript"> 

                function fnmodalpopup() {
        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true
});
        </script>
    </head>

    <!--Misc functions for operations -->
    <script runat="server" type="text/javascript">

    </script>

    <div id="dialog-modal" title="Basic modal dialog">
        <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
    </div>

    <asp:Button ID="Button1" runat="server" Text="Button" />

我正在尝试创建一个与http://jqueryui.com/demos/dialog/#modal 完全相同的对话框，但通过单击一个按钮在 asp.net 表单中触发。页面一闪而过，什么也没有出现。

任何反馈都会非常有帮助！

【问题讨论】：

你的问题是什么？你的问题是什么
你在哪里设置你的变量$dialog？

标签： jquery asp.net jquery-ui modal-dialog

【解决方案1】：

您应该使用 OnClientClick 事件，然后使用 return false 阻止回发，如下所示：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return fnmodalpopup()" />

function fnmodalpopup() {   
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
    return false;
});

编辑：
我已更改 OnClientClick="return fnmodalpopup()"
现在它工作正常（至少在我测试时）。

只是好奇，如果您不想创建回发，为什么要使用服务器端组件？如果没有此按钮必须回发的情况，也许最好使用 html 按钮标记（或任何其他 html 标记并使用 jQuery 捕获 'click' 事件）。是否在页面的其余部分使用 asp.net 控件并不重要。

【讨论】：

尝试了您的建议，只需重置原始页面位置。没有弹出窗口。
好的，现在可以了。有人请投票给 Goran（因为我没有足够的声誉）。谢谢！

【解决方案2】：

在 Asp.Net 中，如果您将脚本管理器拖到页面上，并将按钮放在更新面板 - 内容模板标签中，那么这也可以正常工作。因为 Ajax 更新面板在 asp.net 中默认阻止回发，所以按钮的 OnClientClick 可以正常工作以显示 jquery 弹出窗口。但这主要在按钮是提供丰富客户端体验的控件集的一部分而不是一直回发的情况下很有用（例如，在提供交互式客户端控制面板的用户控件中）。

【讨论】：

【解决方案3】：

尝试改变

       <asp:Button ID="Button1" runat="server" Text="Button" />

到：

      <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="fnmodalpopup();" />

然后：

function fnmodalpopup() {   
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
});

【讨论】：

我必须将按钮放在更新面板中吗？
不，该按钮可以在任何地方使用，但您可能需要查找“stop asp:Button from postback” - 使用可能会更好，我不确定你是否打算在模态对话框之后处理后面代码中的点击事件 - 所以我不知道什么最适合你

【解决方案4】：

试试这个。它可以防止使用 jQuery 回帖。我过去曾遇到过 return false 方法的问题。

$(function () {
    $("[id$=Button1]").click(function () {
        // prevent the default action, e.g., following a link
        event.preventDefault();
        $dialog.dialog('open');
    });
});

如果按钮单击不需要 ASP.Net 功能，还可以考虑使用其他一些 HTML 对象。它可以清理很多东西，让你不必和服务器打架。

【讨论】：

我想我不需要那个功能，因为我可以使用 onclick 事件。不过好主意。
您使用 asp:button 有什么原因吗？即是否也有一些服务器端逻辑正在完成？

【解决方案5】：

试试这个

 $(function () {
        modalPosition();
        $(window).resize(function () {
            modalPosition();
        });
        $('.openModal').click(function (e) {
            $('.modal, .modal-backdrop').fadeIn('fast');
            e.preventDefault();
        });
        $('.close-modal').click(function (e) {
            $('.modal, .modal-backdrop').fadeOut('fast');
        });
    });
    function modalPosition() {
        var width = $('.modal').width();
        var pageWidth = $(window).width();
        var x = (pageWidth / 2) - (width / 2);
        $('.modal').css({ left: x + "px" });
    }

参考：-Modal popup using jquery in asp.net

【讨论】：

【解决方案6】：

<div class="container">

    <div class="row">
        <center><h2>Product Information</h2></center>
    </div>
    <div class="row">
        <div class="col-md-3">
                <div class="form-group">
                    <input type="text" id="txtpname" placeholder="Product Name" class="form-control">
                </div>

                <div class="form-group">
                    <input type="text" id="txtpprice" placeholder="Product Price" class="form-control">
                </div>

            <input type="submit" id="btninsert" value="Insert" class="btn btn-primary">
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-5">
            <table id="ProductTable" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <td>ID</td>
                        <td>Product Name</td>
                        <td>Product Price</td>
                        <td>Action</td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <div id="mmd" class="modal fade" role="dialog">

        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">

                    <h3>Update Product</h3>

                </div>
                <div class="modal-body">
                    <input type="hidden" id="hdnID" value="0" />

                        <div class="form-group">
                            <input type="text" id="txtuppname" placeholder="Product Name" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="text" id="txtuppprice" placeholder="Product Price" class="form-control">
                        </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" id="btnupdate" value="Update" class="btn btn-primary">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
        </div>

【讨论】：

还请说明这是如何解决问题的