JQuery UI Dialog Box Display Correctly

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="http://ift.tt/2apRjw3">
<script src="http://ift.tt/2eBd7UN"></script>
<script src="http://ift.tt/2aHTozy"></script>
                

<script src="http://ift.tt/20g0BuL"></script>
<script src="http://ift.tt/2dsPzTA"></script>


<input name="DOB" onchange="myFunction()" type="date" class="form-control" id="DOB" required style=Width:60%; position:relative; placeholder="MM/DD/YYYY">