Modal Resize

Please add ax5mask plug-in html document. You can use the ax5mask If you add a plug-in to the page.

<link rel="stylesheet" type="text/css" href="bower_components/ax5ui-mask/dist/ax5mask.css">
<script type="text/javascript" src="bower_components/ax5ui-mask/dist/ax5mask.min.js"></script>

<script type="text/javascript">
    $(document.body).ready(function () {
        var mask = new ax5.ui.mask();
        var modal = new ax5.ui.modal();
        modal.setConfig({
            onStateChanged: function () {
                // mask
                if (this.state === "open") {
                    mask.open();
                }
                else if (this.state === "close") {
                    mask.close();
                }
            }
        });

        $('#modal-open').click(function () {
            modal.open({}, function () {

                var btn = jQuery(
                    '<button class="btn btn-primary" type="button">' +
                    'Modal Close</button>')
                    .click(function () {
                        modal.close();
                    });

                var btnResize = jQuery(
                    '<button class="btn btn-default" type="button">' +
                    'Resize</button>')
                    .click(function () {
                        modal.css({width:500, height: 500});
                        modal.align();
                    });

                var btnRestore = jQuery(
                    '<button class="btn btn-default" type="button">' +
                    'Restore</button>')
                    .click(function () {
                        modal.css({width:300, height: 400});
                        modal.align();
                    });

                this.$["body-frame"]
                    .css({padding: 50})
                    .append(btn)
                    .append('<hr/>')
                    .append(btnResize)
                    .append(btnRestore);

            });
        });

    });
</script>