Fokus auf dem Element nach dem Schließen jquery ui modal

Question

Ich versuche, mich wieder verwendbare jquery ui modales Dialogfeld zu verwenden, und nachdem ich Lösung wie diese in diesem Forum Suche gefunden (Danke für Benutzer ash)

1. erstellen Dialog Klasse

   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. erstellen Ihnen ein globales Objekt in einen der gemeinsamen Datei (jsp)

   OK_DIALOG = new OkDialog(); 
   

3. Rufen Sie diese Funktion mit wünschenswerter Nachricht

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

Ich habe versucht, und es funktioniert gut.

mein Code:

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

Wenn ich save_button klicken, Modal und konzentrieren arbeiten zusammen, und nachdem ich OK klicken, Fokus verschwunden.

Also, meine Frage ist, wie zu Element nach dem Schließen der Modal zu konzentrieren?

Answer 1

Gehen Sie einfach durch den folgenden Code. Hier habe ich die ID des Steuerelements übergeben, das auf close-Ereignis des modalen Fensters konzentriert sein sollte.

In jquery ui modal gibt es ein Ereignis namens close, das auslöst, wenn das Modal geschlossen wird. Innerhalb dieses Ereignisses haben wir uns auf diese Kontrolle konzentriert. Es funktioniert also.

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>