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模式彈出框

回答

相關問題