如何替換形式，內容，使用定製信息

Question

我有一個簡單的形式與名稱，等級&評反饋模式。用戶提交表單後，我想顯示自定義消息，例如 - 您的反饋已提交。以下是我的ajax調用。成功的Ajax響應後，我將我的表單內容替換爲自定義消息。但我的模式顯示爲空白。沒有自定義內容出現。 #modal_window是我使用自定義#message div替換原始反饋表單的Div。我想在自定義消息下面添加Ok按鈕，關閉它，它應該關閉模式。請建議。 下面是#modal_window和JS代碼

JSP代碼

<div id="modal_wrapper"> 
<div id="modal_window"> 

    <div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div> 

<p><Strong>We'd love your feedback.</Strong><br></p> 

<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p> 

<form id="modal_feedback" method="POST" action="" accept-charset="UTF-8" > 
    Your Name :<br> 
    <input type="text" name="name" id="name" value=""><span></span><br> 
    <div class="feedback"> 
    <div class="feedbackCl" > 
    <input id="overall_0" name="overall" id="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l"> 
    <label for="overall_0" class="labelClass"> 
     <span class="sight">— —</span> 
     <span class="screen_reader" id="o1-l">Poor</span> 
    </label> 
    </div> 
    <div class="feedbackCl"> 
    <input id="overall_1" name="overall" id="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l"> 
    <label for="overall_1" class="labelClass"> 
     <span class="sight">—</span> 
     <span class="screen_reader" id="o2-l">Fair</span> 
    </label> 

    </div> 
    <div class="feedbackCl"> 
    <input id="overall_2" name="overall" id="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l"> 
    <label for="overall_2" class="labelClass"> 
     <span class="sight">+ —</span> 
     <span class="screen_reader" id="o3-l">Good</span> 
    </label> 
    </div> 
    <div class="feedbackCl"> 
    <input id="overall_3" name="overall" id="overall" type="radio" value="4" tabindex="0" aria-describedby="o4-l"> 
    <label for="overall_3" class="labelClass"> 
     <span class="sight">+</span> 
     <span class="screen_reader" id="o4-l">Very Good</span> 
    </label> 
    </div> 
    <div class="feedbackCl"> 
    <input id="overall_4" name="overall" id="overall" type="radio" value="5" tabindex="0" aria-describedby="o5-l"> 
    <label for="overall_4" class="labelClass"> 
     <span class="sight">+ +</span> 
     <span class="screen_reader" id="o5-l">Excellent</span> 
    </label> 
    </div> 
    </div> 
    <br> 
    <span><br></span><br> 
    <textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="80" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" ></textarea><br> 
    <span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br> 
    <input type="submit" name="feedbackForm" class="buttonFb button1" value="Submit" id="submit_btn"> 
</form> 
</div> 
</div> 

JS代碼的HTML代碼

 document.getElementById("modal_feedback").addEventListener("submit", function(e) { 
     e.preventDefault(); 
     var form = this; 
     var name = form.name.value; 
     var rating = form.overall.value; 
     var msg = form.message.value; 
      if(name == "") { 
      alert("Please enter your Name"); 
      form.name.focus(); 
      e.preventDefault(); 
      } else if(rating == "") { 
     alert("Please select a rating"); 
     form.overall[0].focus(); 
     e.preventDefault(); 
     } else if(msg == "") { 
     alert("Please enter your comment in the Message box"); 
     form.message.focus(); 
     e.preventDefault(); 
    } 
    $.ajax({ 
    type: "POST", 
    url: "feedbackData.htm?ratingId="+rating+"&msg="+msg, 
    async : false, 
    dataType: "html", 
    success: function(response) { 
     console.debug(response); 
     if(response == 'Y'){ 
     $('#modal_window').html("<div id='message'></div>"); 
     $('#message').html("<h2>Feedback Form Submitted!</h2>").append("<p>We will be in touch soon.</p>") 
     } 
    }, 
    error : function(e) { 
     alert('Error: ' + e); 
    } 
    }); 
    return false; 
}); 

    document.addEventListener("DOMContentLoaded", function() { 
    var modalWrapper = document.getElementById("modal_wrapper"); 
    var modalWindow = document.getElementById("modal_window"); 

    var openModal = function(e) 
    { 
     modalWrapper.className = "overlay"; 
     modalWindow.style.marginTop = (-modalWindow.offsetHeight)/2 + "px"; 
     modalWindow.style.marginLeft = (-modalWindow.offsetWidth)/2 + "px"; 
     e.preventDefault(); 
     }; 

     var closeModal = function(e) 
     { 
     modalWrapper.className = ""; 
     e.preventDefault(); 
     }; 

     var clickHandler = function(e) { 
     if(e.target.tagName == "DIV") { 
     if(e.target.id != "modal_window") closeModal(e); 
     } 
     }; 

     var keyHandler = function(e) { 
     if(e.keyCode == 27) closeModal(e); 
     }; 

     document.getElementById("modal_open").addEventListener("click", openModal, false); 
     document.getElementById("modal_close").addEventListener("click", closeModal, false); 
     document.addEventListener("click", clickHandler, false); 
     document.addEventListener("keydown", keyHandler, false); 
     }, false); 

     function toCount(entrance,exit,text,characters) { 
       var entranceObj=document.getElementById(entrance); 
       var exitObj=document.getElementById(exit); 
       var length=characters - entranceObj.value.length; 
       if(length <= 0) { 
       length=0; 
       text='<span class="disable"> '+text+' <\/span>'; 
       entranceObj.value=entranceObj.value.substr(0,characters); 
        } 
       exitObj.innerHTML = text.replace("{CHAR}",length); 
       } 

Answer 1

試着改變你這樣的success功能代碼：

if(response == 'Y'){ 
    $('#modal_window').html("<div id='message'><a onclick='closeModal()' href="javascript:void(0)">close <b>X</b></a><h2>Feedback Form Submitted!</h2><p>We will be in touch soon.</p></div>"); 
} 

關閉功能來關閉模式：

function closeModal() { 
    $('#modal_wrapper').hide(); 
}