如何在頁面加載時打開數據英國模式

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 的方式：

組件.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"
 ]