JQuery UI Dialog Box Display Correctly

Question

I created a validation to check if a person is less than 18 years of age. If the person is less than 18 years of age a dialog box opens. I'm using JQuery UI dialog-box to do this, but the dialog-box looks messed up (see picture) . I don't know what i'm doing wrong here. How do i make the dialog box display correctly?

  function myFunction() { today = new Date(); todayYear = today.getFullYear(); todayMonth = today.getMonth(); todayDay = today.getDay(); var x = document.getElementById("DOB").value; birthDate = new Date(x); birthYear = birthDate.getFullYear(); birthMonth = birthDate.getMonth(); birthDay = birthDate.getDay(); age = todayYear - birthYear; if (todayMonth < birthMonth - 1 ){ age--; } if (age < 18){ $( function() { $('<div></div>').dialog({ modal: true, title: "Age Check?", open: function () { var markup = 'Applicant is not 18 years old. Do you wish to continue?'; $(this).html(markup); }, buttons: { 'Confirm': function() { $(this).dialog('close'); }, 'Change': function() { $('#DOB').val(''); $(this).dialog('close'); } } }); } ); } } 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <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> <input name="DOB" onchange="myFunction()" type="date" class="form-control" id="DOB" required style=Width:60%; position:relative; placeholder="MM/DD/YYYY"> 

Answer 1

jquery-ui.css is missing

 function myFunction() { today = new Date(); todayYear = today.getFullYear(); todayMonth = today.getMonth(); todayDay = today.getDay(); var x = document.getElementById("DOB").value; birthDate = new Date(x); birthYear = birthDate.getFullYear(); birthMonth = birthDate.getMonth(); birthDay = birthDate.getDay(); age = todayYear - birthYear; if (todayMonth < birthMonth - 1 ){ age--; } if (age < 18){ $( function() { $('<div></div>').dialog({ modal: true, title: "Age Check?", open: function () { var markup = 'Applicant is not 18 years old. Do you wish to continue?'; $(this).html(markup); }, buttons: { 'Confirm': function() { $(this).dialog('close'); }, 'Change': function() { $('#DOB').val(''); $(this).dialog('close'); } } }); } ); } } 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"> <script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> <input name="DOB" onchange="javascript:myFunction()" type="date" class="form-control" id="DOB" required style=Width:60%; position:relative; placeholder="MM/DD/YYYY">