Question

我正在使用data-uk-modal打开一个模式框，当我点击按钮时它打开完美但我只是想在页面加载时打开这个，我有代码跟随代码

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

这是我的js代码

请告诉我如何在页面加载时打开diwlogure框

Answer 1

$(function() {
    var modal = UIkit.modal("#my_id");
    modal.show(); 
});

Answer 2

给按钮一个ID，然后触发点击页面加载。

HTML

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

的jQuery

$(document).ready(function(){
    $('#openmodal').trigger('click');
})

Answer 3

这是使用Angular 7对我起作用的方式：

Component.ts

import * as UIkit from 'uikit';
...
...
...
  ngAfterViewInit(){
   var modal = UIkit.modal("#modal-id");
   modal.show();
  }

记住：要做到这一点，您需要在应用程序上声明UIKit javascript文件：

angular.json

 "scripts": [
     "./node_modules/uikit/dist/js/uikit.min.js",
     "./node_modules/uikit/dist/js/uikit-icons.min.js"
 ]

如何在页面加载时打开数据uk模式

3 个答案: