<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery模式弹出确认窗口 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/blitzer/jquery-ui-1.8.2.custom.css">
<link rel="stylesheet" type="text/css" href="css/thickbox.css">
<style type="text/css">
body {background-color: #efefef;font-family: "Trebuchet MS",sans-serif;font-size: 16px;}
fieldset{background-color: #ededed;border: 1px solid;}
legend{background-color: #ffffff;color: #cccccc;padding:5px;}
h1,h2,p,form {padding: 5px;}
h1,h2{font-size: 18px; color: #666666;}
legend,label,#dialog-email,#TB-email{font-weight:bold;margin-left: 10px;}
.container {width: 50%;margin-left: 25%;margin-top:2%;background: #ffffff;border: 4px solid #cccccc;}
.ui-dialog {font-size: 90%;}
form#testconfirmJQ fieldset{border-color: #ce0c0c;}
form#testconfirmJS legend{border: 1px solid #000000;color: #999999;}
form#testconfirmJQ legend{background-color: #ce0c0c;}
form#testconfirmTB legend{background-color: #000000;}
.message {color: maroon;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/thickbox-compressed.js"></script>
<script type="text/javascript">
$(function(){
// jQuery UI Dialog
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Submit Form": function() {
document.testconfirmJQ.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$('form#testconfirmJQ').submit(function(){
$("p#dialog-email").html($("input#emailJQ").val());
$('#dialog').dialog('open');
return false;
});
//Thickbox
$('form#testconfirmTB').submit(function(){
$("p#TB-email").html($("input#emailTB").val());
tb_show('Verify Form Thickbox Style','TB_inline?height=155&width=300&inlineId=TBcontent');
return false;
});
$('input#TBcancel').click(function(){
tb_remove();
});
$('input#TBsubmit').click(function(){
document.testconfirmTB.submit();
});
});
</script>
</head>
<body>
<div class="container">
<h1>Form Submit Confirmation Demo:<br />Javacript Return Confirm and Modal jQuery and Thickbox</h1>
</div>
<div class="container">
<h2>Form Submit Confirmation Javascript</h2>
<?php if (isset($_POST['emailJS'])){
echo "<p class='message'>Javascript 1.0 worked!!! Your e-mail address is " .$_POST['emailJS'];
echo "</p>";
}?>
<form id="testconfirmJS" name="testconfirmJS" method="post">
<fieldset>
<legend>Javacript Return Confirm</legend>
<p><label for="email">E-mail:</label><br />
<input id="emailJS" type="text" name="emailJS" value="" /></p>
<p><input id="submitJS" name="submitJS" type="submit" value="Submit" onclick="return confirm('You entered your e-mail address as:\n\n' + form.elements['emailJS'].value + '\n\nSelect OK if correct or Cancel to edit.')" /></p>
</fieldset>
</form>
</div>
<div class="container">
<h2>Form Submit Confirmation jQuery UI</h2>
<?php if (isset($_POST['emailJQ'])){
echo "<p class='message'>jQuery UI worked!!! Your e-mail address is " .$_POST['emailJQ'];
echo "</p>";
}?>
<form id="testconfirmJQ" name="testconfirmJQ" method="post">
<fieldset>
<legend>jQuery UI Modal Submit</legend>
<p><label for="email">E-mail:</label><br />
<input id="emailJQ" type="text" name="emailJQ" value="" /></p>
<p><input id="submitJQ" name="submitJQ" type="submit" value="Submit" /></p>
</fieldset>
</form>
</div>
<div id="dialog" title="Verify Form jQuery UI Style"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> You entered your e-mail address as:</p><p id="dialog-email"></p><p>
If this is correct, click Submit Form.</p><p>To edit, click Cancel.<p></div>
<div class="container">
<h2>Form Submit Confirmation with Thickbox</h2>
<?php if (isset($_POST['emailTB'])){
echo "<p class='message'>Thickbox worked!!! Your e-mail address is " .$_POST['emailTB'];
echo "</p>";
}?>
<form id="testconfirmTB" name="testconfirmTB" method="post">
<fieldset>
<legend>Thickbox Modal Submit</legend>
<p><label for="email">E-mail:</label><br />
<input id="emailTB" type="text" name="emailTB" value="" /></p>
<p><input id="submitTB" name="submitTB" type="submit" value="Submit" /></p>
</fieldset>
</form>
</div>
<div id="TBcontent" style="display: none;"><p>You entered your e-mail address as:</p><p id="TB-email"></p><p>
If this is correct, click Submit Form.</p><p>To edit, click Cancel.<p>
<input type="submit" id="TBcancel" value="Cancel" />
<input type="submit" id="TBsubmit" value="Submit Form" />
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery模式弹出确认窗口 jQuery模式弹出确认窗口网页特效.zip （21个子文件） 
jQuery模式弹出确认窗口 jQuery模式弹出确认窗口网页特效 jiaoben993 css blitzer images 
ui-icons_004276_256x240.png 5KB ui-bg_highlight-hard_100_f6f6f6_1x100.png 89B ui-bg_glass_55_fbf8ee_1x400.png 121B ui-bg_diagonals-thick_75_f3d8d8_40x40.png 375B _notes 
dwsync.xml 2KB ui-icons_cc0000_256x240.png 4KB ui-bg_flat_65_ffffff_40x100.png 178B ui-bg_flat_0_333333_40x100.png 180B Thumbs.db 7KB ui-bg_highlight-hard_100_eeeeee_1x100.png 94B
ui-anim_basic_16x16.gif 2KB ui-icons_ffffff_256x240.png 4KB ui-bg_dots-small_65_a6a6a6_2x2.png 83B ui-bg_highlight-soft_15_cc0000_1x100.png 108B ui-bg_flat_75_ffffff_40x100.png 178B jquery-ui-1.8.2.custom.css 20KB thickbox.css 4KB
index.html 6KB js jquery-ui-1.8.2.custom.min.js 40KB thickbox-compressed.js 6KB jquery-1.4.2.min.js 70KB资源评论
