Skip to content

Instantly share code, notes, and snippets.

@dsternlicht
Last active November 27, 2018 15:01
Show Gist options
  • Select an option

  • Save dsternlicht/2f075bb33fe6e601c38d06987b209b08 to your computer and use it in GitHub Desktop.

Select an option

Save dsternlicht/2f075bb33fe6e601c38d06987b209b08 to your computer and use it in GitHub Desktop.
Complete HTML for our vanilla modal component
<html>
<head>
<title>Vanilla Modal</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- CSS Import -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Clicking this button will open the modal -->
<button id="modal_opener">Click Me! I Don't Bite... 😛</button>
<div class="modal" style="display: none">
<div class="overlay"></div>
<div class="modal_content">
<!-- Dynamic Section -->
<h2>Told Ya!</h2>
<iframe src="https://giphy.com/embed/l52CGyJ4LZPa0" width="480" height="273" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/sandler-sentences-sounding-l52CGyJ4LZPa0">via GIPHY</a></p>
<!-- End of Dynamic Section -->
<button title="Close" class="close_modal">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- Main script Import -->
<script src="./modal.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment