We use Magnific Popup for popups. By writing HAML as illustrated below, you can create a popup, leveraging our MagnificPopup JavaScript component and without writing any JavaScript yourself.
Note: You'll probably want to apply a background color to your popup content.
%div{"data-ui-component" => "magnific-popup"}
.mfp-hide{"data-ui-component" => "magnific-src"}
.xs-text-center
.xs-text-left.box.box--white-light.xs-inline-block.xs-p2{"data-ui-component" => "magnific-close-button-container"}
%h2 List of cool things
%ul
%li Bicycles
%li Laughing
%li Dogs
%a.js-link.text-bold{"data-ui-component" => "magnific-popup-button"} Click to open popup
<div data-ui-component='magnific-popup'>
<div class='mfp-hide' data-ui-component='magnific-src'>
<div class='xs-text-center'>
<div class='xs-text-left box box--white-light xs-inline-block xs-p2' data-ui-component='magnific-close-button-container'>
<h2>List of cool things</h2>
<ul>
<li>Bicycles</li>
<li>Laughing</li>
<li>Dogs</li>
</ul>
</div>
</div>
</div>
<a class='js-link text-bold' data-ui-component='magnific-popup-button'>Click to open popup</a>
</div>