scaling iframe content

by Plippie Plop

HTML

<script src="&lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<div class="modal iframe-modal">
  <div class="modal-header">
    <h3>External content</h3><a href="#" class="btn close">X</a>
  </div>
  <div class="modal-body">
    <iframe class="frame" src="http://time.is"></iframe>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">BUTTON</a>
  </div>
</div>


<div class="modal normal-modal">
  <div class="modal-header">
    <h3>External content</h3><a href="#" class="btn close">X</a>
  </div>
  <div class="modal-body">
    <p>
      Some small text line
    </p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">BUTTON</a>
  </div>
</div>

<div class="container">
  <p>
    <a href="javascript:;" class="btn" data-target="modal" data-target-name="iframe-modal">Iframe modal</a>
    <a href="javascript:;" class="btn" data-target="modal" data-target-name="normal-modal">normal modal</a>
  </p>

</div>

CSS

body {
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Roboto';
}

.container {
  display: flex;
  flex: 1 1 auto;
}

.modal.modal-show {
   visibility: visible;
}

.modal {
  position: fixed;
  height: 80vh;
  width: 80vw;
  z-index: 2000;
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, .22), 0 25px 55px 0 rgba(0, 0, 0, .21);
  border: 1px solid rgb(190, 190, 190);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  visibility: visible;
	backface-visibility: hidden;
	transform: translateX(-50%) translateY(-50%);
}

.modal-header,
.modal-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  background-color: rgb(240, 240, 240);
}

.modal-header h3 {
  flex: 1 1 auto;
  padding-left: .5em;
  font-weight: 700;
}

.modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgb(190, 190, 190);
  border-bottom: 1px solid rgb(190, 190, 190);
}

.btn {
  margin-left: auto;
  padding: .5em 1em;
  color: rgb(100, 100, 100);
  background-color: rgb(200, 200, 200);
  font-weight: 700;
  text-decoration: none;
}

.frame {
  flex: 1 1 auto;
  border: 0;
}

JavaScript

$('.btn').on('click', function(e) {
      e.preventDefault();

			$('.modal').filter(':visible').removeClass('modal-show');
      
      var bData = $(this).data();
      var bTarget;
      var bTargetName;

      if (typeof bData.target !== "undefined") {
        bTarget = bData.target;
      }
      if (typeof bData.targetName !== "undefined") {
        bTargetName = bData.targetName;
      }


      if (bTarget === "modal") {

        if (bTargetName !== "") {
          var tModal = $('.' + bTargetName);
          if (tModal.not(':visible') ){
              tModal.addClass('modal-show');

            }

          }


        }


      });