JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<iframe id="idMainContentPanel" allowtransparency="true"  scrolling="no" width="100%" height="800" src="http://ilabs.uw.edu/sites/default/files/sample_0.pdf"></iframe>

 <div id="pnlSpecialInstructions" class="modalPopup" style="z-index: 100; position: absolute; top:40%;left:20%;background-color: Red;">
 <div id="innerPanelSplInstructions" class="modalPopup" style="z-index: 100; position: absolute">
 <div id="pnlSpecialInstructionsDragHandle" style="height:25px;vertical-align: middle;cursor: move; background-color: #DDDDDD;border: solid 1px Gray; color: Black; text-align: center;">
 <b>Special Instructions Listing</b>  </div>
 <br />
</div>
<iframe id="iFrameSplIns" scrolling="no" class="iframeSize"></iframe>
</div>

CSS

.iframeSize
{
    width: 200px;
    height: 200px;
}

JavaScript

a = 0.50;
$("#pnlSpecialInstructions").fadeTo("fast", a);
$("#iFrameSplIns").fadeTo("fast", a);