How to open data uk modal on page load

Question

i am using the data-uk-modal for open a modal box its open perfect when i click on the button but i just want to open this when page load, i have tie following code

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

This is my js code

Please tell me how can i open the diwlogure box on page load

Answer 1

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

Answer 2

give the button an ID and trigger the click on page load.

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

This is how it works to me using Angular 7:

Component.ts

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

Remember: to do it, you need to be declared the UIKit javascript file on your application:

angular.json

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