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

找到所有可用选项

＆＃13;

var modal = UIkit.modal('#js-modal', {'bgClose':false});
$('#toggleButton').on('click', function() {
  modal.toggle();
});

＆＃13;

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

＆＃13;

UIKit - 通过Javascript传递选项

1 个答案: