聚焦到元素關閉jQuery用戶界面模式後

我嘗試使用可重複使用jQuery UI的模態對話框，之後在這個論壇上，我發現了這樣的解決方案搜索（用戶灰感謝）聚焦到元素關閉jQuery用戶界面模式後

創建對話框類

function OkDialog() { 
    this.showMessage = function(message) { 
     var $dialog = $('<div></div>') 
         .html(message) 
         .dialog({ 
         modal: true, 
         closeOnEscape: true, 
         buttons: { 
          Ok: function() { 
          $(this).dialog("close"); 
          } 
         } 
         }); 

     $dialog.dialog("open"); 
    } 

}

在（JSP）的共同文件的一個創建一個全局對象
```
OK_DIALOG = new OkDialog(); 
```

調用此函數與希望的訊息

OK_DIALOG.showMessage("You don't have more than a single penny.");

我試着和它運作良好。

我的代碼：

HTML：

<label>Your Name</label> : <input type="text" id="your_name"/> 
    <label>Your Country</label> : <input type="text" id="your_country"/> 
    <button type="button" id="save_button">Save</button>

的jQuery：

$(document).ready(function() { 
     $('#save_button').on('click', function(e) { 
      var your_name = $('#your_name').val(); 
      if ($.trim(your_name).length==0) { 
       OK_DIALOG = new OkDialog(); 
       OK_DIALOG.showMessage("Please fill your name!"); 
       $('#your_name').focus(); 
       return false; 
      } 
     } 
    });

當我點擊save_button，莫代爾共同關注的工作，之後我點擊確定按鈕，對焦消失。

所以，我的問題是如何關閉模式後關注元素？

來源

2017-09-09 Saddler

只需通過下面的代碼。在這裏，我已經傳遞了應該關注模態窗口關閉事件的控件的ID。

在jquery ui模式中有一個事件叫close，當模態被關閉時觸發。在那次活動中，我們專注於這一控制。所以這是有效的。

function OkDialog() { 
 
    this.showMessage = function(message,control_Id="") { 
 
     var $dialog = $('<div></div>') 
 
         .html(message) 
 
         .dialog({ 
 
         modal: true, 
 
         closeOnEscape: true, 
 
         close: function() { 
 
          if(control_Id!="") 
 
           $(control_Id).focus(); 
 
         }, 
 
         buttons: { 
 
          Ok: function() { 
 
          $(this).dialog("close"); 
 
          } 
 
         } 
 
         }); 
 

 
     $dialog.dialog("open"); 
 
    } 
 

 
} 
 

 
$(document).ready(function() { 
 
     $('#save_button').on('click', function(e) { 
 
      var your_name = $('#your_name').val(); 
 
      if ($.trim(your_name).length==0) { 
 
       OK_DIALOG = new OkDialog(); 
 
       OK_DIALOG.showMessage("Please fill your name!",'#your_name'); 
 
       return false; 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    
 
<label>Your Name</label> : <input type="text" id="your_name"/> 
 
    <label>Your Country</label> : <input type="text" id="your_country"/> 
 
    <button type="button" id="save_button">Save</button>

來源

2017-09-09 06:08:07

這是你期望的輸出？ –

@ jino shaji，對於遲到的回覆感到抱歉，我已經嘗試過了，你的代碼運行良好，非常感謝您的幫助。 – Saddler

那你爲什麼不接受我的回答。如果你接受這對我來說是一個很大的啓發。 –

聚焦到元素關閉jQuery用戶界面模式後

回答

相關問題