关闭jquery ui modal后聚焦到元素

Question

我正在尝试使用可重复使用的 jquery ui 模态对话框，在这个论坛中搜索后我找到了这样的解决方案（感谢用户 ash）

1. 创建对话框类

   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");
     }
   
   }
   

2. 在一个公共文件（jsp）中创建一个全局对象

    OK_DIALOG = new OkDialog();
   

3. 使用所需的消息调用此函数

    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 时，modal 和 focus 一起工作，当我点击 ok 按钮后，焦点消失了。

那么，我的问题是如何在关闭模式后聚焦到元素？

Answer 1

只需浏览下面的代码。 在这里，我传递了控件的 id，该控件应专注于模态窗口的关闭事件。

在 jquery ui modal 中有一个叫做 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>