jQuery對話框彈出

我試圖讓這個對話框彈出窗體顯示，當這個鏈接被點擊，但它不適合我。過去三個小時我一直在爲此工作，這對我來說太令人沮喪了。jQuery對話框彈出

這裏是我的html

<a href="#" id="contactUs">Contact Us</a> 
<div id="dialog" title="Contact form"> 
    <p>appear now</p> 
</div>

下面是我的javascript，這是一個外部文件。

$("#contactUs").click(function() { 
    $("#dialog").dialog("open"); 
    return false; 
});

我已經使用這些鏈接，但無濟於事。

http://jqueryui.com/demos/dialog/#modal

http://jqueryui.com/demos/dialog/#default

請讓我知道，如果有一個想法，大加讚賞，感謝。

來源

2012-06-03 rj2700

沒有錯誤？沒有奇怪的視覺行動？沒有？ – Zuul

如果你有興趣，我有一個插件，使jQuery對話更容易：http://www.mostthingsweb.com/2011/12/dialogwrapper-2-1-released/ –

啊對不起，基本上，錯誤是彈出窗口根本不顯示。感謝您的鏈接，我現在就檢查一下。 – rj2700

這個HTML是好的：

<a href="#" id="contactUs">Contact Us</a>     
<div id="dialog" title="Contact form"> 
    <p>appear now</p> 
</div>

需要初始化對話框（不知道你這樣做）：

$(function() { 
    // this initializes the dialog (and uses some common options that I do) 
    $("#dialog").dialog({ 
    autoOpen : false, modal : true, show : "blind", hide : "blind" 
    }); 

    // next add the onclick handler 
    $("#contactUs").click(function() { 
    $("#dialog").dialog("open"); 
    return false; 
    }); 
});

來源

2012-06-03 00:55:00

謝謝，這有助於，但是，對話框仍然不顯示給我。我會嘗試環顧更多。 – rj2700

試試這個小提琴：http://jsfiddle.net/N7PRp/它適用於我。 – rcdmk

你的問題是關於呼籲對話

如果不初始化對話框，則不必通過「打開」以顯示：

$("#dialog").dialog();

此外，此代碼需要在$(document).ready();函數或低於它的工作要素。

來源

2012-06-03 00:57:26 rcdmk

謝謝。我沒有通過公開就嘗試過，但仍然不適合我。另外，我沒有發佈準備好的事件，但它出現在文檔中。 – rj2700

試試這個小提琴：http://jsfiddle.net/N7PRp/它適用於我。 – rcdmk

您可以檢查此鏈接： http://jqueryui.com/dialog/

此代碼應該工作正常

$("#dialog").dialog();

來源

2013-09-03 11:44:15 Krishna

它很簡單，第一個HTML必須添加：

<div id="dialog"></div>

然後，它必須是初始化：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    jQuery('#dialog').dialog({ 'autoOpen': false }); 
    }); 
</script>

在此之後，你可以通過代碼顯示它：下面的代碼

jQuery('#dialog').dialog('open');

來源

2013-12-08 10:05:49

使用，它爲我工作。

<script type="text/javascript"> 
    $(document).ready(function() { 
      $('#dialog').dialog({ 
       autoOpen: false, 
       title: 'Basic Dialog' 
      }); 
      $('#contactUs').click(function() { 
       $('#dialog').dialog('open'); 
      }); 
     }); 
</script>

來源

2015-01-11 19:18:05

您可以使用以下腳本。它對我很有用

模式本身由一個主模態容器，一個頭部，一個主體和一個頁腳組成。頁腳包含動作，在這種情況下是OK按鈕，標題包含標題和關閉按鈕，主體包含模態內容。

$(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:41:53 Rameshbl

jQuery對話框彈出

回答

相關問題