Dialog fails to inert body with StoryInterface

[htremura]

Is your feature request related to a problem? In playing with dialogs and a custom StoryInterface I found that if the StoryInterface does not contain a <div id="story"> wrapped around the <div id="passages"> the Dialog API will not fully work. e.g. elements in the passage that should have their z-index subtracted when a dialog is opened do not because SugarCube's JQuery does not target them correctly. This means that, even with a dialog open, the user is still able to hit TAB to select links in the underlying passage and activate them with the RETURN/ENTER key.

Describe the solution you'd like. The Documentation for StoryInterface should include a note about the Dialog API not fully working when there isn't a story ID'ed element.

Additional context. An example of a StoryInterface that was allowing interaction in the passage below the dialog:

:: StoryInterface
<div id="ui-bar">
  <div id="ui-bar-body">
    <nav id="menu" role="navigation">
      <ul>
        <li class="menu-item" id="menu-item-toggle-closed"><a tabindex="-1" class="menulink"></a></li>
        <li class="menu-item" id="menu-item-toggle"><a tabindex="-1" class="menulink"></a></li>
      </ul>
      <table id="menu-core">
        <tr class="menu-item" id="menu-item-button-save">
          <td id="menu-item-saves"><a tabindex="-1" class="menulink"></a></td>
        </tr>
        <tr class="menu-item" id="menu-item-button-settings">
          <td id="menu-item-settings"><a tabindex="-1" class="menulink"></a></td>
        </tr>
        <tr class="menu-item" id="menu-item-button-inventory">
          <td id="menu-item-inventory"><a tabindex="-1" class="menulink"></a></td>
        </tr>
        <tr class="menu-item" id="menu-item-button-restart">
          <td id="menu-item-restart"><a tabindex="-1" class="menulink"></a></td>
        </tr>
      </table>
    </nav>
  </div>
</div>
<div id="passages"></div>
<div id="credits"></div>

And an example of the same StoryInterface, but fixed to disallow interaction in the passage below dialogs:

:: StoryInterface
<div id="ui-bar">
  <div id="ui-bar-body">
    <nav id="menu" role="navigation">
      <ul>
        <li class="menu-item" id="menu-item-toggle-closed"><a tabindex="-1" class="menulink"></a></li>
        <li class="menu-item" id="menu-item-toggle"><a tabindex="-1" class="menulink"></a></li>
      </ul>
      <table id="menu-core">
        <tr class="menu-item" id="menu-item-button-save">
          <td id="menu-item-saves"><a tabindex="-1" class="menulink"></a></td>
        </tr>
        <tr class="menu-item" id="menu-item-button-settings">
          <td id="menu-item-settings"><a tabindex="-1" class="menulink"></a></td>
        </tr>
        <tr class="menu-item" id="menu-item-button-inventory">
          <td id="menu-item-inventory"><a tabindex="-1" class="menulink"></a></td>
        </tr>
        <tr class="menu-item" id="menu-item-button-restart">
          <td id="menu-item-restart"><a tabindex="-1" class="menulink"></a></td>
        </tr>
      </table>
    </nav>
  </div>
</div>
<div id="story" role="main"><div id="passages"></div></div>
<div id="credits"></div>

[tmedwards]

Even when using the StoryInterface special passage open dialogs should continue to render the underlying page inert. I'd prefer to simply call this a bug and address the issue in code.

[htremura]

That is reasonable and I agree. I didn't want to assume the intended functionality and whether or not that was intended behavior. Thanks for everything you do with SugarCube!