正确显示JQuery UI对话框
正确显示JQuery UI对话框
提问于 2017-04-04 04:30:35
我创建了一个验证来检查一个人是否不满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">
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-04-04 04:50:50
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">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43198286
复制相关文章
相似问题
腾讯云开发者
