<div class='modal' style="position: absolute;width:300px;height:300px;margin-left: -150px;margin-top: -150px;z-index: 1040;" jqyoui-resizable data-drag="true" jqyoui-options="{containment: 'window', scroll:false}" style="-ms-touch-action: none" ng-show="$parent.popout" jqyoui-draggable="{onDrag: 'onDrag', onStop: 'onStop'}">
  <div class="modal-header">
    <h3 bo-text="'popout' | translate : 'tooltips'"></h3>
    <button type="button" style="margin-top: -26px;" class="close delete" ng-click="$parent.popout = false"></button>
  </div>
  <iframe id="{{dummyId}}" ng-src="{{popoutUrl}}" style="height: calc(100% - 39px);" frameborder="0" width='100%'></iframe>     
  <!-- This is actually to cover iframe to smoothen resizing -->
  <div style="position: absolute;width: calc(100% - 15px);height: calc(100% - 54px);opacity:0;background:gray;" ng-show="$parent.isResizing"></div>
</div>
<div class="modal-backdrop" style="z-index: 1040;opacity:0;" ng-show="$parent.isResizing"></div>