更好地替換ShowModalDialogue

目前在我的網站中，我正在顯示一個ShowModalDialogue來顯示警告。最近我一直要求修改這一行爲爲初級講座：更好地替換ShowModalDialogue

早期行爲：

我以前只是顯示一個警告消息。用戶可以點擊對話框的確定或關閉按鈕繼續。

新行爲：

我一直在問同一個ShowModalDialogue插入一個文本框。現在用戶必須在單擊確定按鈕之前插入他的首字母縮寫。此外，他現在還無法通過單擊關閉按鈕來關閉對話框。如果在文本框爲空時單擊關閉按鈕或確定按鈕以嘗試關閉對話框，則彈出相同的彈出窗口並出現警告。但麻煩在於，關閉後警告消息對話框在屏幕上隨機移動，即使其屬性已被修改，使其不會移動。

現在我被要求用更好的東西來取代ShowModalDialogue。我有兩個建議：1. CSS div Popup 2. Ajax控制ModalPopup。哪一個比較好？還有什麼可以用來替代我可以使用的嗎？

我的主要問題是外觀好看，易於操作。

在此先感謝。

來源

2013-06-05 Pratik Gaikwad

我喜歡jQuery UI的對話框*爲基礎*（我應用插件，「修復」以jQuery UI爲中心的DOM並繼續前進） - 儘管我不喜歡它是如何默認的，但它提供的基礎*正常工作正常*用於諸如Tab Control和內容大小調整之類的內容，並且可以從以保持靈活性。（我使用DurandalJS實際託管對話內容 - 通過「顯示模式視圖」支持 - 這避免了將標記推入JavaScript。） – user2246674

想試試qTip2嗎？這個爲你提供了很多選擇。

http://craigsworks.com/projects/qtip2/demos/#dialogues

來源

2013-06-05 05:11:47 yeyene

感謝您的回覆，這聽起來不錯。不幸的是我的網站是一個商業。因此，我不能使用除jQuery源或AJAXControlToolkit之外的任何第三方插件。你能提出其他建議嗎？ –

，你可以簡單地做它用jQuery UI的

$("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true, 
     buttons: { 
      "Create an account": function() { 
       bValid = $("#d-form").valid(); 
       if (bValid){ 
        $("#users tbody").append("<tr>" + 
         "<td>" + $("#name").val() + "</td>" + 
         "<td>" + $("#email").val() + "</td>" + 
         "<td>" + $("#password").val() + "</td>" + 
        "</tr>"); 
        $(this).dialog("close"); 
      } 

      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
      allFields.val("").removeClass("ui-state-error"); 
     } 
    });

Fiddle

來源

2013-06-05 05:17:57

謝謝。但是，它的行爲可以像用戶一樣無法使用窗口的「關閉」按鈕或空文本框關閉它？ –

在關閉函數中，如果驗證失敗，可以進行驗證並添加重試語句。是否有任何意義？ –

是的。我想我必須在取消功能中添加相同的代碼，對吧？ –

更好地替換ShowModalDialogue

回答

相關問題