How can I create a modal dialog box using Metro UI?

Question

I'm using metro ui and I have want to show a Dialog box.

This is my code:

$("#createFlatWindow").on('click', function(){

$.Dialog({

            overlay: true,
            overlayClickClose:true,
            shadow: true,
            flat: false,
            content: '',
            title: 'Please wait..',
            width: 300,
            height: 170,
            sysButtons: {
                btnMin: false,
                btnMax: false,
                btnClose: false
            },
            onShow: function(_dialog){
                var content = _dialog.children('.content');
                content.html('<div style="width:500px;"><div style="float:left;padding-top:10px;padding-left:10px;padding-right:25px;"><img src="/uiframework/autobatch/images/autobatch_ajax_loader_1.GIF"></div><div style="float:left;padding-top:40px;width:350px;"><b>Please wait for a while we are in process of creating batch</b></div></div>');
            }
        });
});

<input type ="button" id="createFlatWindow"/>

When i click on the button it pops up a dialog box. This is hides the parent page. However the problem is that a mouse-click anywhere outside the dialog box closes it, and I don't want it to.

Any idea how I can make the dialog box modal so that it doesn't?

Answer 1

I was able to get your code working by changing

overlayClickClose:true,

to

overlayClickClose:false,

I also tried adding modal: true, but that didn't seem to have any effect so I guess it's not needed.