jQuery UI對話框第二次未打開

我正在使用jqueryui作爲對話框。第一次點擊「Click for a modal」鏈接。當按下ESC鍵時，對話框消失。但之後的點擊不起作用。我希望這些工作。刷新頁面使一切正常。jQuery UI對話框第二次未打開

HTML：

<a href="" class="click_me" style="font-size:15px;"> Click for a modal</a><br /> 

<div class="demo" "> 

<div id="dialog" title="&nbsp;&nbsp;&nbsp;Upload Your Profile Picture" style="border1111:1px solid red; width:640px;"> 

     this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is 


</div><!-- end of id dialog --> 
</div><!-- End demo -->

jQuery的片段：

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $(".click_me").bind('click', function (e) { 
     e.preventDefault(); 
     $("#dialog").css('border', '5px solid #848484'); 
     $("#dialog").dialog({ 
      width: 460 
     }); 
     //$("#dialog").dialog("option", "height", 180); 
    }); 

    $("body").bind("keyup#dialog", function (event) { 
     // 27 == "esc" 
     if (event.which == 27) { 
      // TODO: close the dialog 
      // unbind the event 
      $("body").unbind("keyup.myDialog"); 
     } 
    }); 

}); 
</script>

我怎樣才能使多次點擊的工作？

來源

2012-01-02 Istiaque Ahmed

關於爲什麼給出負評分的任何解釋？看看PPvG和我之間的對話..概率仍然沒有解決 – 2012-01-03 11:04:05

我認爲你的問題被拒絕了，因爲它被回答了，但你在評論中提出了一個新問題。專業提示：在問你的下一個問題之前，先看看[問]。 – PPvG 2012-01-03 14:35:32

四件事情。

首先，如果對話應該是可重複使用的，你會想之前創建它第一次點擊和autoOpen選項設置爲false。要打開對話框，您應該使用dialog('open')。

例如：

$(document).ready(function() { var dialog = $('#dialog'); dialog.dialog({ // <-- create the dialog width: 460, autoOpen: false }); $(".click_me").bind('click', function (e) { e.preventDefault(); dialog.dialog('open'); // <-- open the dialog }); });

注意，我創建了一個var dialog保存$('#dialog')。這是更高效的，否則，jQuery將不得不在一段代碼中多次查找#dialog。

其次，你有一個錯誤在你的HTML：有一個報價了太多的位置：

<div class="demo" ">

這可能會導致在某些瀏覽器意外的行爲（但不是全部），這使得它很難調試。刪除多餘的報價。

第三，如果我記得沒錯，jQuery UI對話框已經處理了ESC鍵，所以你不必自己去做。如果您想在按下exscape時關閉對話框以外的其他操作，則應該實際使用對話框的beforeClose事件。如果你只想關閉對話框，你一切都準備好了。 :-)

最後，最好不要使用內聯樣式。因此，而不是這樣的：

<a href="" class="click_me" style="font-size:15px;">Click for a modal</a>

用下面的命令創建一個CSS文件：

.click_me { font-size:15px; }

您可以#dialog做同樣的，包括你現在用JavaScript應用邊框：

#dialog { border: 5px solid #848484; width:640px; }

希望這會有所幫助。

這裏是一個適用於四點，我提到一個工作示例：http://jsfiddle.net/PPvG/yHTJw/

注意，jQuery UI的風格缺失，所以對話是有點難看。:-)

爲了確保對話框正常工作，請確保您正在使用jQuery和jQuery UI的最新版本，並且包括一個jQuery UI主題。

這裏就是一切都是通過Google CDN加載一個例子：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

在HTML的<head>包括這些。結果應該是like this。如果沒有，你可以嘗試幾件事：

看看你的瀏覽器的JavaScript控制檯（每個現代瀏覽器都有一個;谷歌它）。

嘗試其他瀏覽器。

嘗試以不同的方式加載網頁（例如，通過file://而不是通過localhost）。

（極端情況:)嘗試使用其他計算機和不同的網絡連接。

如果沒有這些工作，我很抱歉地說，但是......「你做錯了」。 :-P

請注意，上面的代碼片段將包含名爲「base」的默認jQuery UI主題。如果它不符合您的需求，您可以將Google CDN用於其他一些默認主題（請參閱this blog post），或者您可以使用ThemeRoller創建自己的主題。

編輯：

爲了確保對話框保留焦點（因此當用戶按下ESC，即使用戶點擊其他地方的頁面上被關閉），嘗試設置modal爲真：

$('#dialog').dialog({ autoOpen: false, modal: true });

的jsfiddle：http://jsfiddle.net/PPvG/yHTJw/3/

正常用戶仍然可以與頁面上的其他項目進行交互（因此，這些項目可以從焦點對話框中抓取焦點）。當modal選項設置爲true時，用戶不能再與頁面的其餘部分迭代，並且無論如何，對話框都將保持焦點。

希望這會有所幫助。

來源

2012-01-02 12:24:14 PPvG

當單擊後出現對話框時，如果您單擊對話區域本身之外，然後按'Esc'鍵不會消失。當我在本地主機上嘗試時，「close」選項不會出現。解？ – 2012-01-03 06:13:35

@IstiaqueAhmed：對我來說工作很好（如前所述，從風格開始）。試試這個：http://pastie.org/3116949。您將需要互聯網來加載jQuery或更改「

嘗試使用$("#dialog").close();代替$("body").unbind("keyup.myDialog");

來源

2012-01-02 11:58:34 redmoon7777

實際上，如果我排除'esc'鍵綁定和解除綁定，仍然保持不變。如果我排除那個，會是什麼解決方案？ – 2012-01-02 12:01:00

問題來自您的代碼的其他部分（我測試了這一點，它工作正常）。是否新創建了（.jlick調用或某個事件後）新創建的「.click_me」鏈接 – redmoon7777 2012-01-02 12:07:34

..哦，在這種情況下，我必須再次檢查張貼的片段。但克里斯有一個翔實的答案。我還沒有經過臨屋區 – 2012-01-02 12:17:36

.dialog({ 
      title: "Confirmation", 
      modal: true, zIndex: 10000, autoOpen: true, 
      resizable: false, 
      width: 1000, 
      height: 530, 
      maxHeight: 1000, 
      minHeight: 200, 
      closeOnEscape: false, 
      buttons: { 
       Yes: function() { 
        CLOSEDDPROJECT.confirmCancelRequest(); 
        $(this).dialog("close"); 
       }, 
       No: function() { 
        $(this).dialog("destroy"); 
        $('.propagateRA').prop('checked', false); 
       } 
      }, 
      close: function() { 
       $(this).remove(); 
      } 
     });

嘗試使用$（this）.dialog（「destroy」）;而不是$（this）.dialog（「close」）;

來源

2018-02-28 06:19:55 vipinlalrv

相關問題