0

我有以下 html 代码：

<html>
<title> Reddit </title>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.20/css/uikit.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.20/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.20/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/core/modal.min.js"></script>

</head>
<body>
<button class="md-btn md-btn-success" data-uk-modal="{target:'#my_id'}">Open 
Dialogue</button>

<div class="uk-modal" id="my_id" >  
<div class="uk-modal-dialog">
    <div class="uk-modal-header">
        Custom Content here
    </div>
</div>

<div class="uk-modal-footer uk-text-right">
<button type="button" class="md-btn md-btn-flat uk-modal-
close">Close</button>
</div>

</div>
</body>
</html>

我通过 getuikit cdn 链接加载 uikit 组件的地方。但是，模式窗口根本不显示。我不知道我是否正确地包含了所有内容。请帮忙。

4

1 回答 1

1

您的代码中有几个问题：

  1. 首先，正如 DaveP 所指出的，您使用的是 UIKit 3，而不是旧的 UIKit 2。您不需要第 4 脚本行，因为所有组件都集成到 uikit.js
  2. 因此，请参阅新的Modal 文档。需要进行 3 处更改：
    • 对于激活器按钮，不要使用data-uk-modal="{target:'#my_id'}"，而是将其更改为uk-toggle="target: #my_id"
    • 添加uk-modal到实际的模态div（即<div class="uk-modal" id="my_id" uk-modal>）
    • 将您的uk-modal-footerdiv 放在uk-modal-dialogdiv 中。

  3. 完整代码：

    <html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.20/css/uikit.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.20/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.20/js/uikit-icons.min.js"></script>
</head>

<body>
    <button class="md-btn md-btn-success" uk-toggle="target: #my_id">Open Dialogue</button>

    <div class="uk-modal" id="my_id" uk-modal>  
        <div class="uk-modal-dialog">
            <div class="uk-modal-header">
                Custom Content here
            </div>

            <div class="uk-modal-footer uk-text-right">
                <button type="button" class="md-btn md-btn-flat uk-modal-close">Close</button>
            </div>
        </div>
    </div>
</body>
</html>

    旁注：您也在混合 Bootstrap 类，通常坚持一个前端框架是个好主意。

于 2017-05-18T07:58:20.050 回答