Question

我试图在asp.net页面上点击一个按钮后出现一个modalpopup。

   <%@ 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形式触发。页面闪烁，没有任何内容。

任何反馈都会非常有用！

Answer 1

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

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

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

编辑：
我改变了OnClientClick =“返回 fnmodalpopup（）” 现在它工作正常（至少在我测试时）。

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

Answer 2

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

Answer 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
    });
});

Answer 4

试试这个。它使用jQuery阻止回发。我过去曾遇到过返回错误方法的问题。

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

如果单击按钮不需要ASP.Net功能，还可以考虑使用其他一些HTML对象。它可以清理相当多的东西，并防止你不得不与服务器战斗。

Answer 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

Answer 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>

JQuery Modal Popup

6 个答案: