Question

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

创建对话框类

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，模态和焦点一起工作时，点击确定按钮后，焦点消失。

所以，我的问题是如何在关闭模态后关注元素？

Answer 1

请仔细阅读以下代码。这里我传递了控件的id，它应该关注模态窗口的close事件。

在jquery ui modal中有一个名为close的事件，当模态关闭时会触发该事件。在那次活动中，我们专注于那个控制。它起作用了。

＆＃13;

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

＆＃13;

<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>

＆＃13;

关闭jquery ui模态后关注元素

1 个答案: