xxjapp / xdialog

A simple and beautiful javascript dialog library
https://xxjapp.github.io/xdialog/
Apache License 2.0
26 stars 2 forks source link

Not close the dialog when clicking out of it? #4

Closed MikeGriffinReborn closed 5 months ago

MikeGriffinReborn commented 5 months ago

Is there anyway to stop the dialog from closing when a user simply clicks on the background of the window?

xxjapp commented 5 months ago

@MikeGriffinReborn

Currently, you can achieve this using a custom ondrag as shown below:

xdialog.open({
    title: 'Login Demo',
    body: '\
    <style>\
        .demo1-mb-1 { margin-bottom: 1em; }\
        .demo1-row { text-align: center; }\
        .demo1-row label { min-width: 6em; display: inline-block; text-align: right; margin-right: 0.5em; }\
        .demo1-row input { padding: 0.3em; outline: none; min-width: 12em; }\
        .demo1-validated input { border: green 2px solid; }\
        .demo1-validated input:invalid { border: red 2px solid; }\
    </style>\
    <div id="demo1-form">\
        <div class="demo1-row demo1-mb-1"><label for="uname">User Name</label><input type="text" id="uname" required></div>\
        <div class="demo1-row"><label for="psw">Password</label><input type="password" id="psw" required></div>\
    </div>',
    buttons: { ok: 'Login', cancel: 'Cancel' },
    effect: '3d_rotate_bottom',
    style: 'width: 25em;',
    ondrag: function(element, destElement, srcElement) {
        if (destElement === srcElement) {
            return 'default';
        }

        return false;
    },
    onok: function() {
        document.getElementById('demo1-form').classList.add('demo1-validated');

        let uname = document.getElementById('uname').value;
        let psw = document.getElementById('psw').value;

        if (!uname || !psw) {
            return false;
        }

        xdialog.alert('Welcome, ' + uname);
    }
});