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 });

该对话框可以正常工作并呈现得很好，但是未传递选项。我也试过在 HTML 中通过 bg-close 在不同的地方，但没有成功。

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>

UIKit - 通过 Javascript 传递选项

UIKit - Passing Options via Javascript

html

getuikit