CMS TEST DROP > MODAL

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit-icons.min.js"></script>
<a class="open-drop" href="#">Open drop</a>
<!-- This is the dropdown -->
<div id="open-drop" uk-dropdown="mode: click">
  <p>Lorem ipsum dolor sit amet.<i class="uk-icon-cog"></i></p>
  <button class="uk-button" href="#open-modal" uk-toggle>Open modal</button>
</div>

<!-- This is the modal -->
<div id="open-modal" uk-modal="bg-close: false">
  <div class="uk-modal-dialog uk-modal-body">
    <p>Lorem ipsum dolor sit amet.</p>
    <p class="uk-text-right">
      <button class="uk-button uk-button-default uk-modal-close" type="button">Close</button>
    </p>
  </div>
</div>

CSS

.uk-modal {
  z-index: 1030;
}

JavaScript

$('#open-modal').on('click', function(e) {
    e.stopPropagation();
});