如何用jQuery對話框替換javascript警報（在事件調用它的地方彈出）？

Question

研究員，我將它分解得更清楚一些。 當我查看JQuery UI內容時，對於要下載的內容以及將文件放在何處絕對感到困惑。

我DID成功完成的工作就是鏈接到JQuery網站，這樣我就不必下載任何內容，就可以看到對話框可以正常工作。

但是，對話框（從顯示給我的示例中）鏈接到div。 如果該div位於屏幕頂部且輸入框位於底部，則該div不會對我有幫助。 從多個文本框調用的標頭中只有一個函數。 此函數包括帶有消息的javascript alert（）。

請告訴我我需要輸入該函數的精確代碼（我們將其稱為MyFunction（）），該函數會在調用MyFunction的任何地方彈出一條消息。

如果是javascript，則在腳本的開頭部分中將有：

<script type="text/javascript">

function digitsOnly(){
alert("Digits only, please");
}

</script>

在許多文本框中，我們將：

<input type="test/javascript" onkeydown="digitsOnly()" />

我需要一個漂亮的彈出框來替換javascript alert（）; 除了在調用文本框旁邊彈出一條消息外，我不需要執行任何其他操作。 如果它是可拖動且可調整大小的，那將是最酷的事情。 但是現在，我會對我提到的內容感到滿意。

我一直在學習語言。 我知道我最終也會學習JQuery。 但是如果可能的話，我今晚需要這樣做。

詹姆士

Answer 1

window.alert = function(message) {
    // put your dialog box launching code here.
}

Answer 2

看一下jQuery UI的對話框 。 這也不會替換默認的alert() ，因此您應該遍歷代碼並用對話框實例替換對alert(...)調用。

Answer 3

Javascript的alert()函數先於其他任何東西運行，因此很難（如果不是不可能）實際替換其默認行為。 但是，您可以輕松實現自己的功能。 代替：

$('.clickable').click(function() {
  alert("Clicked.");
});

做這個：

$('.clickable').click(function() {
  $('.dialog').dialog({ 
    // options...
  });
});

您將必須遍歷代碼並用此代碼替換每個警報，但是，這沒什么大不了的，尤其是當您使用Textmate之類的東西時，它具有“搜索項目”功能。

Answer 4

嘗試這個：

$.extend({ alert: function (message, title) {
  $("<div></div>").dialog( {
    buttons: { "Ok": function () { $(this).dialog("close"); } },
    close: function (event, ui) { $(this).remove(); },
    resizable: false,
    title: title,
    modal: true
  }).text(message);
}
});

更多信息在這里 ；

Answer 5

蒂莫西的答案是可行的。 稍后請參閱我的評論以了解必要的補充內容。 我從蒂莫西·庫里（Timothy Khouri）的答案中復制並粘貼了我的評論：

“當然，我需要它彈出文本框所在的位置，就像JavaScript警報框一樣。”

我認為您的意思是，如果您要滾動瀏覽頁面的中部，然后調用alert，它將以您當前的View Port（您在屏幕上看到的內容）為中心...並且您想要這個新的prettied對話框中執行相同的操作。

答案是-“是” ...是的，jQuery會將對話框居中放置在當前視圖的端口處，就像警報框一樣。

您需要下載並引用主要的jQuery庫，還需要引用最新的jQueryUI庫，以及一個jQuery CSS主題。

然后，它應該很簡單：

 $("<p>Yo, G Dog<p>").dialog({ modal: true }); 

因此，蒂莫西的代碼幾乎可以正常工作。 我不得不四處弄亂，直到找到導致兩個對話框打開的原因。 Google搜索沒有答案。 只是實驗，使我看到由於某種原因插入對話框的每個HTML標簽都打開了自己的對話框。 解決此問題的方法是在div中包含所有HTML標簽。 現在甚至沒有空白對話框出現。

如果您不知道我在說什么，請使用自己的代碼，看看會發生什么。 然后，在括號內放置更多HTML標記。 例：

("<h3>Attention></h3><p>Yo, G Dog</p>").dialog({ modal: true });

最后，將h3和p放置在div內，然后看到很酷的結果：

("<div><h3>Attention></h3><p>Yo, G Dog</p></div>").dialog({ modal: true });

后一段代碼將僅顯示一個對話框。 ：） 謝謝回答！

詹姆士

Answer 6

alert = function(a){ my_alert(a); }

Answer 7

我花了100次閱讀問題才能理解您的意思

“當然，我需要它彈出文本框所在的位置，就像JavaScript警報框一樣。”

我認為您的意思是，如果您要在頁面的中部向下滾動，然后調用alert ，它將以您當前的View Port （您在屏幕上看到的內容）為中心...並且您想要此新的prettied對話框中執行相同的操作。

答案是-“是” ...是的，jQuery會將對話框居中放置在當前視圖的端口處，就像alert框一樣。

您需要下載並引用主要的jQuery庫，還需要引用最新的jQueryUI庫，以及一個jQuery CSS主題。

然后，它應該很簡單：

$("<p>Yo, G Dog<p>").dialog({ modal: true });