Jquery dialog

by younesalouani

HTML

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Modal confirmation</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/trontastic/jquery-ui.css">
  
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="dialog-confirm" title="Delete my business page">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:20px 12px 20px 0;"></span>This page will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
 
<button id="create-user">Create new user</button>
 
 
</body>
</html>

CSS

#dialog-confirm {
  display: none;
}

.ui-dialog {
  max-width: 100%;
  max-height: 100%;
}

JavaScript

$(function () {
    var dialog;

    function addUser() {
    	dialog.dialog("close");
    }
    
    dialog = $("#dialog-confirm").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        buttons: {
            "Create an account": addUser,
            "Cancel Me": function () {
                dialog.dialog("close");
            }
        },
        close: function () {
        }
    });

    $("#create-user").button().on("click", function () {
        dialog.dialog("open");
    });

});



var screenWidth, screenHeight, dialogWidth, dialogHeight, isDesktop;

    screenWidth = window.screen.width;
    screenHeight = window.screen.height;

    if ( screenWidth < 500 ) {
        dialogWidth = screenWidth * .95;
        dialogHeight = screenHeight * .95;
    } else {
        dialogWidth = 500;
        dialogHeight = 500;
        isDesktop = true;
    }

    setTimeout(function(){
      $(function() {
          $("#n8f-popup-login-message").dialog({
              title: 'Welcome to Startup Academy!',
              draggable: false,
              modal: true,
              height: dialogHeight,
              width: dialogWidth,
              closeOnEscape: false,
              open: function() {
                if(isDesktop) {
                  disableScroll();
                }
              }
          });

      });
}, 2000);