我有一个可以提交数据的模态,但是,我需要能够多次执行此操作。
我遇到的问题是,使用我当前的代码,我只能提交一次,然后从那里它将返回我的第一个提交的数据,而不是允许我重用模态对话框。
有人能指出我如何使用下面的示例页面重用/清除模态中的数据吗?
答案 0 :(得分:0)
将html存储在变量中,然后在关闭花式框后将其放在<div id="inline">
内。
$(document).ready(function() {
$(".modalbox").fancybox({'closeBtn' : false });
$("#newinput").submit(function() { return false; });
$inline = $('#inline').html(); //Store the html
$(document).on("click", "#submit", function(e){ //Make the event with document
e.preventDefault();
var msgval = $("#msg").val();
var msglen = msgval.length;
if( msglen < 1) {
$("#msg").addClass("error");
}
else if( msglen > 0){
$("#msg").removeClass("error");
$("#newinput").fadeOut("fast", function(){
$(this).before("<p><strong>Input = " + msgval + "</strong></p>");
setTimeout(function(){
$.fancybox.close();
$("#inline").html($inline); //Place the html
}, 1000);
});
}
console.log($("#msg").val());
});
});
$(document).ready(function() {
$(".modalbox").fancybox({'closeBtn' : false });
$("#newinput").submit(function() { return false; });
$inline = $('#inline').html();
$(document).on("click", "#submit", function(){
var msgval = $("#msg").val();
var msglen = msgval.length;
if( msglen < 1) {
$("#msg").addClass("error");
}
else if( msglen > 0){
$("#msg").removeClass("error");
$("#newinput").fadeOut("fast", function(){
$(this).before("<p><strong>Input = " + msgval + "</strong></p>");
setTimeout(function(){
$.fancybox.close();
$("#inline").html($inline);
}, 1000);
});
}
console.log($("#msg").val());
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" />
* { margin: 0; padding: 0; outline: none; }
html { font-size: 62.5%; height: 101%; }
body { background: #fff; font-family: "Calibri", Arial, sans-serif; }
img { border: 0; }
a { color: #3a51b2; text-decoration: none; }
a:hover { text-decoration: underline; }
h2 { font-size: 1.8em; line-height: 1.9em; margin-bottom: 15px; }
p { color: #656565; font-size: 1.2em; margin-bottom: 10px; }
#wrapper { width: 640px; margin: 0 auto; padding: 30px 45px; }
#inline { display: none; }
label { margin-right: 12px; margin-bottom: 9px; font-family: Georgia, serif; color: #646464; font-size: 1.2em; }
.txt {
display: inline-block;
color: #676767;
width: 420px;
font-family: Arial, Tahoma, sans-serif;
margin-bottom: 10px;
border: 1px dotted #ccc;
padding: 5px 9px;
font-size: 1.2em;
line-height: 1.4em;
}
.txtarea {
display: block;
resize: none;
color: #676767;
font-family: Arial, Tahoma, sans-serif;
margin-bottom: 10px;
border: 1px dotted #ccc;
padding: 5px 9px;
font-size: 1.2em;
line-height: 1.4em;
}
.txt:focus, .txtarea:focus { border-style: solid; border-color: #bababa; color: #444; }
input.error, textarea.error { border-color: #973d3d; border-style: solid; background: #f0bebe; color: #a35959; }
input.error:focus, textarea.error:focus { border-color: #973d3d; color: #a35959; }
#send {
color: #dee5f0;
display: block;
cursor: pointer;
padding: 5px 11px;
font-size: 1.2em;
border: solid 1px #224983;
border-radius: 5px;
background: #1e4c99;
background: -webkit-gradient(linear, left top, left bottom, from(#2f52b7), to(#0e3a7d));
background: -moz-linear-gradient(top, #2f52b7, #0e3a7d);
background: -webkit-linear-gradient(top, #2f52b7, #0e3a7d);
background: -o-linear-gradient(top, #2f52b7, #0e3a7d);
background: -ms-linear-gradient(top, #2f52b7, #0e3a7d);
background: linear-gradient(top, #2f52b7, #0e3a7d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f52b7', endColorstr='#0e3a7d');
}
#send:hover {
background: #183d80;
background: -webkit-gradient(linear, left top, left bottom, from(#284f9d), to(#0c2b6b));
background: -moz-linear-gradient(top, #284f9d, #0c2b6b);
background: -webkit-linear-gradient(top, #284f9d, #0c2b6b);
background: -o-linear-gradient(top, #284f9d, #0c2b6b);
background: -ms-linear-gradient(top, #284f9d, #0c2b6b);
background: linear-gradient(top, #284f9d, #0c2b6b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#284f9d', endColorstr='#0c2b6b');
}
#send:active {
color: #8c9dc0;
background: -webkit-gradient(linear, left top, left bottom, from(#0e387d), to(#2f55b7));
background: -moz-linear-gradient(top, #0e387d, #2f55b7);
background: -webkit-linear-gradient(top, #0e387d, #2f55b7);
background: -o-linear-gradient(top, #0e387d, #2f55b7);
background: -ms-linear-gradient(top, #0e387d, #2f55b7);
background: linear-gradient(top, #0e387d, #2f55b7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e387d', endColorstr='#2f55b7');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="wrapper">
<p>Send us feedback from the modal window.</p>
<p><a class="modalbox" href="#inline">click to open</a></p>
</div>
<!-- hidden inline form -->
<div id="inline">
<h2>New Input</h2>
<form id="newinput" name="damage" action="#" method="post">
<input type="text" id="msg" name="msg" class="txtarea">
<button id="submit">OK</button>
</form>
</div>