javascript - 关闭 jquery ui 模态后聚焦到元素

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. 在公共(public)文件(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;
           }
      } 
  });

当我点击保存按钮时，模态和焦点一起工作，当我点击确定按钮后，焦点消失了。

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

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>