<!DOCTYPE html>
<html lang="en" ng-app="simplePopupDemo">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Angular Simple Popup Demo</title>
  <script src="https://s3-eu-west-1.amazonaws.com/jtcraddock.ie/angular-simple-popup/angular.js"></script>
  <script src="https://s3-eu-west-1.amazonaws.com/jtcraddock.ie/angular-simple-popup/simple-popup.js"></script>
  <link rel="stylesheet" href="https://s3-eu-west-1.amazonaws.com/jtcraddock.ie/angular-simple-popup/simple-popup.css">
  <link rel="stylesheet" href="https://s3-eu-west-1.amazonaws.com/jtcraddock.ie/angular-simple-popup/simple-theme.css">
</head>
<body>
  <h1>Multi Screen Popup Demo</h1>
  <p>(select 'show map' to view a transition)</p>
  <button simple-popup="templates/demo-1/template-1b.html">Contact Us</button>

  <script type="text/ng-template" id="templates/demo-1/template-1b.html">
    <section>
      <h4>Contact Us</h4>
      <div class="two subtitles clear">
        <h5><em>Postal Address</em></h5>
        <h5 class="go-to-screen-2 clickable">Show Map</h5>
      </div>
      <div class="main-content">
        <p>
          My Office,<br />
          Dublin,<br />
          Ireland.
        </p>
      </div>
      <footer>
        <button class="popup-close right">close</button>
      </footer>
      
    </section><!-- popup-screen -->

    <section>
      <h4>Find me</h4>
      <div class="two subtitles clear">
        <h5 class="go-to-screen-1 clickable">Postal Address</h5>
        <h5><em>Map</em></h5>
      </div>
      <div class="main-content">
        <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d76222.98832646404!2d-6.262000775976566!3d53.343822123631476!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sie!4v1460194521658" frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>
      <footer>
        <button class="popup-close right">close</button>
      </footer>
    </section>
  </script>
  
</body>
</html>
.popup-content .map{
  width:100%;
  height:15em;
}
.popup-content iframe{
  display:block;
}
.popup-content em{
  font-weight:bold;
}
.popup-content .clickable{
  cursor:pointer;
}
.italic{
  font-style:italic;
}
angular.module('simplePopupDemo', [
  'jtcraddock.simplePopup'
]);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js