JQuery UI 对话框显示正确

taji01 发表于 Dev

taji01

我创建了一个验证来检查一个人是否小于 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">

罗尼·劳德

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。