聚焦到元素关闭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用户界面模式后

回答

相关问题