JQuery 模态弹出窗口

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

我试图在 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 表单触发。页面闪烁,但什么也没有出现。

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

最佳答案

您应该使用 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 控件也没关系。

关于JQuery 模态弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11637642/

相关文章:

javascript - 为什么我的 JS 在设置为 'onLoad' 时不工作,但在设置为 'No wrap - in <body>' 时工作?

javascript - 我可以把这个 JQuery 语句写得更干净吗?

css - 如何在悬停时更改 datagridview 行的颜色?

c# - 错误消息 : "Only primitive types or enumeration types are supported in this context."

jquery - 如何使用 jQuery UI 对话框单击打开一个新的浏览器窗口?

javascript - 从 ASP.NET 代码后面的 javascript 警报中获取 ok

c# - 在 ASP.NET 日历控件的 OnDayRender 事件期间添加 LinkBut​​tons

javascript - 当我打开一个 Accordion 时,如何关闭多个部分中的所有其他 Accordion ?

php - SQL 匹配所有关键字的开头

javascript - 如何在 Angular js 中返回 html 代码作为过滤器的输出