title: How to allow keyboard tab focusing on div
body: <p>I made a message box on which there are two buttons on it. Basically it's a jQuery plugin, that popup with the overlay effect. But when message box appears, and user press the tab button then the message dialog do not focus. <strong>So how can i do it then if my message box appear, then focus go to my message box automatically? and when focus lose and user press the tab button again then it again comeback to my message dialig</strong> If i click on the message box with the mouse and then press the tab button, then the focus comes to button and then gone. Here is the image <img src="https://i.stack.imgur.com/ZEzKq.png" alt="enter image description here">. Here is the code that make the box. </p>
  
  <pre><code>var containerDiv = $("&lt;div&gt;&lt;/div&gt;", {
      id: config.containerDivID   
  }); 
  
  // append all the div to main Div(container)
  containerDiv.append(messageDiv, buttonDiv);
  
  centerPopup(config, containerDiv);
  loadPopup(config);
  
  function centerPopup(config, container){
      var backgroundPopup = $("&lt;div&gt;&lt;/div&gt;", {
          id: "backgroundPopup"
      }); //end of  imageDiv   
      $("body").append(backgroundPopup);
      $("body").append(container);
      $("#backgroundPopup").css({
          "height": windowHeight
      });
  } //end of  centerPopup()
  
  function loadPopup(config){
      //loads popup only if it is disabled
      if(popupStatus==0){
          $("#backgroundPopup").css({
              "opacity": "0.7"
          });
          $("#backgroundPopup").fadeIn("slow");
          $("#" + config.containerDivID).fadeIn("slow");
          popupStatus = 1;
     }  //end of if
  } //end of function loadPopup()
  </code></pre>
  
  <p>Thanks</p>