Question

我有以下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组件。但是根本不显示模态窗口。我不知道我是否正确包含了一切。请帮忙。

Answer 1

代码中的一些问题：

首先，正如DaveP指出的那样，你使用的是UIKit 3，而不是旧版的UIKit 2.你不需要第4个脚本行，因为所有组件都集成到uikit.js中
因此，请参阅新的Modal documentation。需要进行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-footer div放在uk-modal-dialog div。

完整代码：

<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类，通常只关注一个前端框架。

getuikit模态窗口没有显示

1 个答案: