UIKit - Параметры передачи через Javascript

Question

У меня есть простое диалоговое окно, которое выглядит следующим образом:

<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>

И я призываю это сделать следующим образом:

UIkit.modal.dialog(Popup, { 'bg-close' : false });

Диалоговое окно работает и отрисовывается просто отлично, однако параметры не передаются. Я также пытался пройти bg-close в HTML в разных местах без удачи.

Answer 1

Пожалуйста, посмотрите на мой фрагмент. Есть 2 мода, один из которых использует атрибут DATA, он соответствует официальной документации bg-close:false,

Второй использует Javascript, но bg-close не работает, потому что в JS это называется bgClose, Я знаю, что это не в документах, но camelCase распространена, так что это было мое первое предположение, и это работает. Также вы можете найти все доступные варианты, выполнив 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>