UIKit - Passing Options via Javascript - html

Question

I have a simple dialog box, which looks like the below:
<div class="uk-modal-body">
<h2 class="uk-modal-title">Title</h2>
<p>Some Text....</p>
<p class="uk-text-right">
<button id="information-button" class="uk-button uk-button-default uk-modal-close" type="button">More Information</button>
<button id="agree-button" class="uk-button uk-button-primary uk-modal-close" type="button">Agree</button>
</p>
</div>
And I am calling it to render in the following manner:
UIkit.modal.dialog(Popup, { 'bg-close' : false });
The dialog box works and renders just fine, however the options are not passed. I have also tried passing bg-close in the HTML in various places with no luck.

Answer 1

Please have a look at my snippet. There are 2 modals, one which uses DATA attribute, it matches the official documentation's bg-close:false.
Second uses Javascript, but bg-close doesn't work, because in JS it's called bgClose. I know it's not in the docs, but camelCase is common so it was my first guess and it works. Also you can find all available options by doing console.log(modal);
var modal = UIkit.modal('#js-modal', {'bgClose':false});
$('#toggleButton').on('click', function() {
modal.toggle();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- This modal uses HTML5 data attribute to prevent closing by clicking the background -->
<div id="data-modal" data-uk-modal="bg-close: false">
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Disabled with data attribute</h2>
<p>Some Text....</p>
<p class="uk-text-right">
<button id="information-button" class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button id="agree-button" class="uk-button uk-button-primary" type="button">Agree</button>
</p>
</div>
</div>
<!-- This modal uses JS to prevent closing by clicking the background -->
<div id="js-modal" data-uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Disabled with JS option</h2>
<p>Some Text....</p>
<p class="uk-text-right">
<button id="information-button" class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button id="agree-button" class="uk-button uk-button-primary" type="button">Agree</button>
</p>
</div>
</div>
<!-- This is a button toggling the modal -->
<div class="uk-position-center">
<button data-uk-toggle="target: #data-modal" class="uk-button uk-button-default">DATA BG-CLOSE FALSE</button>
<button id="toggleButton" class="uk-button uk-button-primary">JS BG-CLOSE FALSE</button>
</div>