Addend HTML With HTML Behaviors

You have an extra line break in the code above that is causing it to not execute. The line between the last button and closing div needs to be removed. If you remove it, it runs fine.

var modal = " \ 
<div id='disable-modal' class='modalDialog'> \ 
    <div id='modal-container'> \ 
      <div id='modal-banner'> \ 
        <a href='#close' title='Close' class='close'>X</a> \ 
      </div> \ 
      <h1>Are you sure you want to restore<br>H's homepage?</h1> \ 
      <button is='x-disable-extension-button' class='yes-button'>Yes</button> \ 
      <button href='#close' class='no-button' autofocus >No</button> \ 
    </div> \ 
 </div>"; 
$('body').append(modal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

If that is just a typo, than maybe you can manually do it.

$(modal).appendTo("body").find("[autofocus]").focus();

All browsers don't support "autofocus" e.g IE10 doesn't but Chrome or FireFox supports "autofocus". Your code works perfectly in Chrome or FireFox if the modal string is formatted properly. Please test in other browser!

@tymeJV is the correct answer...

var modal = "<div id='disable-modal' class='modalDialog'> "
    + "<div id='modal-container'> "
     + "<div id='modal-banner'> "
        + "<a href='#close' title='Close' class='close'>X</a>"
      + "</div> "
      + "<h1>Are you sure you want to restore<br>H's homepage?</h1> "
      + "<button is='x-disable-extension-button' class='yes-button'>Yes</button> "
      + "<button href='#close' class='no-button' autofocus >No</button> "
    + "</div>"
 + "</div>";
$('body').append(modal);
$('#close').focus();