Question

我有一个可以提交数据的模态，但是，我需要能够多次执行此操作。

我遇到的问题是，使用我当前的代码，我只能提交一次，然后从那里它将返回我的第一个提交的数据，而不是允许我重用模态对话框。

有人能指出我如何使用下面的示例页面重用/清除模态中的数据吗？

Answer 1

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

重用模态输入框

1 个答案: