javascript - JQuery UI 对话框正确显示

Question

我创建了一个验证来检查一个人是否小于 18 岁。如果此人不满 18 岁，则会打开一个对话框。我正在使用 JQuery UI 对话框来执行此操作，但该对话框看起来很困惑(参见图片)。我不知道我在这里做错了什么。如何使对话框正确显示？

		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 丢失

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">