我正在尝试显示具有动态 div 内容的对话框,在 div 内我尝试添加跨度、文本框和按钮,但未显示 Jquery 对话框。请帮助我解决这个问题
提前感谢您的回答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jquery Dynamic Div</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="JQUERY/jquery-ui.js"></script>
<style type="text/css">
.ui-datepicker
{
width: 17.5em;
height: 16.6em;
font-size:12.5px;
margin-left: 120px;
z-index: 1000;
}
</style>
<script type="text/javascript">
$(document).ready(function ()
{
$("#btnSubmit").click(function ()
{
alert("inside");
var DynamicDiv = $('<div id="ExpiryDatePopup" style="display:block;width:680px;height:327px;background-color:#FFFFFF;></div>');
alert("Div Created");
var breakTag1 = $('</br>');
alert("Div Created");
var breakTag2 = $('</br>');
var ExpDateText = $('<span style="color: steelblue;margin-left: 55px;">Please enter the Expiration Date </span>');
var EndDateText = $('<span style="margin-left: 56px;position: relative;">End Date</span><span style="color: #f00">*</span>');
var DatePickerText = $('<input type="text" id="datepicker" readonly="true" style="margin-left:32px" style="margin-left: 59px;margin-top: 29px;position: static;top: 85px;"/>');
var SubMitButton = $('<input type="button" id="popUpSubmit" value="Submit" style="margin-left: 128px;margin-top: 78px;height: 28px;width: 82px;" />');
alert("Div Created");
$('body').append(DynamicDiv);
$('#ExpiryDatePopup').append(breakTag1);
$('#ExpiryDatePopup').append(breakTag2);
$('#ExpiryDatePopup').append(breakTag1);
$('#ExpiryDatePopup').append(ExpDateText);
$('#ExpiryDatePopup').append(DatePickerText);
$('#ExpiryDatePopup').append(SubMitButton);
alert("hi sam");
$('#ExpiryDatePopup').dialog(
{
height: 400,
width: 600,
title: 'Expiration Date',
position: 'center',
background: 'red',
opacity: '0.3',
modal: true,
open: function ()
{
$("#datepicker").datepicker({ dateFormat: 'yy-mm-dd',
minDate: dateToday,
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'Images_/icon_calendar.jpg'
});
}
});
});
});
</script>
</head>
<body>
<input type="button" id="btnSubmit" value="Submit"/>
</body>
</html>