JQuery模式弹出框

我试图让一个模式弹出一旦按钮被点击在一个asp.net页面上。JQuery模式弹出框

<%@ 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的形式触发。该页面闪烁并且不显示任何内容。

任何反馈将是非常有益的！

来源

2012-07-24 Sc0rpio

你有什么问题？你的问题是什么 – joncodo 2012-07-24 19:08:37

你在哪里设置变量'$ dialog'？ – MrOBrian 2012-07-24 19:08:59

您应该使用的OnClientClick事件，然后防止回传与返回假这样的：

<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按钮标签（或任何其他html标签，并用jQuery捕捉'click'事件）。如果您在页面的其余部分使用asp.net控件，则无关紧要。

来源

2012-07-24 21:00:44 Goran

尝试了您的建议，只需重置原始页面位置。没有弹出。 – Sc0rpio 2012-07-24 21:17:06

好吧，它现在有效。有人请给戈兰投票（因为我没有足够的声望）。谢谢！ – Sc0rpio 2012-07-25 20:47:13

尝试改变

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

来源

2012-07-24 19:11:21

好的，我改变了。仍然只刷新页面。 – Sc0rpio 2012-07-24 20:17:38

我必须将按钮放入UpdatePanel吗？ – Sc0rpio 2012-07-24 21:29:51

不，这个按钮可以在任何地方工作，你可能不得不查看“停止asp：从回发按钮” - 虽然可能会更好地使用，一个人肯定会工作，我不知道你是否正在计划在后面的代码中处理点击事件，虽然在模态对话框之后 - 所以我不知道最适合你的是什么 – 2012-07-24 21:31:55

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

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

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

来源

2012-07-24 19:20:25 PCasagrande

我想我不需要那个函数，因为我可以使用onclick事件。好主意。 – Sc0rpio 2012-07-24 20:17:19

是否有你使用asp：按钮的原因？即是否有一些服务器端逻辑正在完成？ – PCasagrande 2012-07-25 12:42:32

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

来源

2013-02-05 06:56:13

试试这个

$(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

来源

2015-03-30 04:36:12 Rameshbl

JQuery模式弹出框

回答

相关问题