How to build a pull-out drawer over content
<p>Here's a fiddle with code to see show what I have so far: <a href="https://jsfiddle.net/gsnfzn35/1/" rel="nofollow">https://jsfiddle.net/gsnfzn35/1/</a></p>

<p>What I would like to have happen when user clicks "toggle drawer"</p>

<ol>
<li>Original content (heading + etc.) fades to black, and user can no longer scroll this content</li>
<li>New content via drawer pulls out from right side</li>
<li>This new content has its own scroll, where there's a fixed final row at the bottom</li>
</ol>

<p>What is currently happening/ wrong with each step:</p>

<ol>
<li>Content fades to black achieved by a table overlaid over content. However, this content is still scrollable (despite that I tried to set css <code>overflow</code>, <code>hidden</code>); which means that you can scroll away the black overlay</li>
<li>Drawer pulls out successfully, but the mechanism is a bit funky... click toggle drawer again and you'll see that the drawer pulls out more and then pulls in. Furthermore, on neither pull out/in is it as smooth as jQuery UI's documentation shows</li>
<li>New content does NOT have its own scroll. Fixed final row is obscuring a bit of the contents of the drawer</li>
</ol>