Basic Modal

To use the modal UI, you must add the following CSS and JS to the page.
For information about how to install the library and plug-ins, please refer to the index page.

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/ax5core/dist/ax5core.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/ax5ui-modal/dist/ax5modal.css">
<script type="text/javascript" src="bower_components/ax5ui-modal/dist/ax5modal.min.js"></script>

If the library and plug-ins required for the Web page has been prepared, let's run the following code.

<script type="text/javascript">
    $(document.body).ready(function () {
        var modal = new ax5.ui.modal();
        modal.setConfig({
            onStateChanged: function () {
                // console.log(this);
            }
        });

        $('#modal-open').click(function () {
            modal.open({}, function () {
                // check your browser console
                console.log(this);

                var btn = jQuery(
                    '<button class="btn btn-default" type="button" style="margin-top: 100px;">' +
                    'Modal Close</button>');
                btn.click(function () {
                    modal.close();
                });
                this.$["body-frame"].append(btn);

            });
        });

    });
</script>

you can set default configuration with setConfig method on ModalInstance. you can pass additional configuration, when opening the modal.

The first argument of modal.open in the example, the set value (object), the second argument, using the callBack function.
The second argument's 'this' directive contains modal attribute state, width, height and $ attributes.

By using the passed jQuery object, it is possible to extend the desired function freely.