我在弹出的第二个按钮上遇到错误，在这里我想按两个不同的弹出窗口，按下第二个按钮额外的弹出窗口将是空的加入按钮

Question

// Get the modal
			var modal = document.getElementById('myModal');
			
			// Get the button that opens the modal
			var btn = document.getElementById("btn");
			var cat = document.getElementById("cat");
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close")[0];
			
			// When the user clicks the button, open the modal 
			btn.onclick = function() {
				document.getElementById("balance").value = "25";
				document.getElementById("txt1").value = "+ Rs.125";
				document.getElementById("txt2").value = "+ Rs.250";
				document.getElementById("txt3").value = "+ Rs.600";
				document.getElementById("headerPop").innerHTML = "Add Funds To Your Account";
				document.getElementById("oopsPop").innerHTML  = "";
			    modal.style.display = "block";
			}

// first popup working fine but by pressing the 2nd button will not getting the popup.

// in the 2nd popup you will see current balance and joining amount and also add cash text box. 
// if joining amount is less than current balance then it will popup with join button else greater than current balance then calculate remaining amount in add cash text box to equal the joining amount with current balance.

			btn1.onclick = function() {
				$("#oopsPop").append('<div style="display:block; float:left;width:'+170+'px; height:'+50+'px; margin-top:'+5+'px;margin-left:'+5+'px;border:1px dashed #CCCCCC;"> Current Balance <br/> Rs.50 </div> &nbsp; <div style="display:block; float:right;width:'+170+'px; height:'+50+'px; margin-top:'+5+'px;margin-left:'+5+'px;border:1px dashed #CCCCCC;"> Joining Amount <br/> Rs.100 </div> <br/><br/> <p>Add cash to your account to join this contest</p>');
				document.getElementById("balance").value = "50";
				document.getElementById("txt1").value = "+ Rs.250";
				document.getElementById("txt2").value = "+ Rs.500";
				document.getElementById("txt3").value = "+ Rs.1000";
				document.getElementById("headerPop").innerHTML  = "Oops! Not Enough Cash";				
				modal.style.display = "block";
			}
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function() {
			    modal.style.display = "none";
			}
			
			// When the user clicks anywhere outside of the modal, close it
			window.onclick = function(event) {
			    if (event.target == modal) {
			        modal.style.display = "none";
			    }
			}
			// Adding Balance.....
			function sum(val) {
				var res = val.value.split(".")
				console.log('sum '+res[1]);
				  document.getElementById('balance').value = parseInt(document.getElementById('balance').value) +parseInt(res[1]);
				}

a#btn {
    border: 1px solid #303f9f;
    color: #303f9f;
    cursor: pointer;
    float: left;
    overflow: hidden;
    line-height: .8;
    font-size: 1.6em;
    margin: 7px 10px 0;
    padding: 0 2px 1px;
}

/* The Modal (background) */
 .pop {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
} 

/* Modal Content */
 .pop-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    text-align: center;
    padding: 0;
    border: 1px solid #888;
    width: 30%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.3s;
    animation-name: animatetop;
    animation-duration: 0.3s
} 

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top: -300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top: -300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.pop-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
    font-size: 15pt;
}

.pop-body {padding: 2px 16px;}

.pop-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

input#balance {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 20%;
    text-align: center;
    margin: 0 0 20px 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: all 0.3s;
    font-size: 14px;
    padding: 4px;
}

<div class="right">
		   <a class="wallet" href="">Rs.<span id="AmountBalance">50</span></a>
		   <p>1st</p>
		   <button id="btn" title="Add funds">+</button>
		   <!-- <button  id="btn" title="Add funds">+</button> -->

				<!-- The Modal -->
				<div id="myModal" class="pop">
				
				  <!-- Modal content -->
				  <div class="pop-content">
				    <div class="pop-header">
				      <span class="close">&times;</span>
				      <div class="sa" id="headerPop">Add Funds To Your Account</div> 
				    </div>
				    <div id="extraData" class="pop-body">
				        
				         <div id="oopsPop" style="display: block;">
				        	</div>				        				     
				     <div >Add Cash</div>
					 <div >
				            <div >
				               <span class="Code">Rs.</span>
				               <input type="text" id="balance"  value="25" />
							   <div class="">ADD MORE CASH</div></br>
				               <div class="amount">
							   <input type="button" id="txt1" value="+ Rs.125" onClick="sum(this);" />
							   <input type="button" id="txt2" value="+ Rs.250" onClick="sum(this);" />
							   <input type="button" id="txt3" value="+ Rs.600" onClick="sum(this);" />
							   </div></br>
							   <div class="btnRow">
								<input type="submit" id="recharge" name="recharge" class="addMoneySubmit" value="ADD CASH" >
							   </div> </br>
				           </div>
				        </div>
				     
				     
				    </div>
				    
				  </div>
				
				</div>
				
				
		   </div>
		   
		   
		   <br><br><br>

		   
		   <div class="right">   
				   <!-- Trigger/Open The Modal -->
				<!-- <button id="myBtn">Open Modal</button> -->
				<p>2nd</p>
				<button id="btn1" title="Add funds">+</button>
				<!-- <button  id="btn" title="Add funds">join</button> -->
	
		   </div>

Answer 1

删除jquery append并使用javascript在其中添加html。

document.getElementById('oopsPop').innerHTML = "your html"

＆＃13;

＆＃13;

// Get the modal
			var modal = document.getElementById('myModal');
			
			// Get the button that opens the modal
			var btn = document.getElementById("btn");
			var cat = document.getElementById("cat");
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close")[0];
			
			// When the user clicks the button, open the modal 
			btn.onclick = function() {
				document.getElementById("balance").value = "25";
				document.getElementById("txt1").value = "+ Rs.125";
				document.getElementById("txt2").value = "+ Rs.250";
				document.getElementById("txt3").value = "+ Rs.600";
				document.getElementById("headerPop").innerHTML = "Add Funds To Your Account";
				document.getElementById("oopsPop").innerHTML  = "";
			    modal.style.display = "block";
			}

// first popup working fine but by pressing the 2nd button will not getting the popup.

// in the 2nd popup you will see current balance and joining amount and also add cash text box. 
// if joining amount is less than current balance then it will popup with join button else greater than current balance then calculate remaining amount in add cash text box to equal the joining amount with current balance.

			btn1.onclick = function() {
				document.getElementById('oopsPop').innerHTML = '<div style="display:block; float:left;width:'+170+'px; height:'+50+'px; margin-top:'+5+'px;margin-left:'+5+'px;border:1px dashed #CCCCCC;"> Current Balance <br/> Rs.50 </div> &nbsp; <div style="display:block; float:right;width:'+170+'px; height:'+50+'px; margin-top:'+5+'px;margin-left:'+5+'px;border:1px dashed #CCCCCC;"> Joining Amount <br/> Rs.100 </div> <br/><br/> <p>Add cash to your account to join this contest</p>';
				document.getElementById("balance").value = "50";
				document.getElementById("txt1").value = "+ Rs.250";
				document.getElementById("txt2").value = "+ Rs.500";
				document.getElementById("txt3").value = "+ Rs.1000";
				document.getElementById("headerPop").innerHTML  = "Oops! Not Enough Cash";				
				modal.style.display = "block";
			}
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function() {
			    modal.style.display = "none";
			}
			
			// When the user clicks anywhere outside of the modal, close it
			window.onclick = function(event) {
			    if (event.target == modal) {
			        modal.style.display = "none";
			    }
			}
			// Adding Balance.....
			function sum(val) {
				var res = val.value.split(".")
				console.log('sum '+res[1]);
				  document.getElementById('balance').value = parseInt(document.getElementById('balance').value) +parseInt(res[1]);
				}

＆＃13;

a#btn {
    border: 1px solid #303f9f;
    color: #303f9f;
    cursor: pointer;
    float: left;
    overflow: hidden;
    line-height: .8;
    font-size: 1.6em;
    margin: 7px 10px 0;
    padding: 0 2px 1px;
}

/* The Modal (background) */
 .pop {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
} 

/* Modal Content */
 .pop-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    text-align: center;
    padding: 0;
    border: 1px solid #888;
    width: 30%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.3s;
    animation-name: animatetop;
    animation-duration: 0.3s
} 

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top: -300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top: -300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.pop-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
    font-size: 15pt;
}

.pop-body {padding: 2px 16px;}

.pop-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

input#balance {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 20%;
    text-align: center;
    margin: 0 0 20px 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: all 0.3s;
    font-size: 14px;
    padding: 4px;
}

＆＃13;

<div class="right">
		   <a class="wallet" href="">Rs.<span id="AmountBalance">50</span></a>
		   <p>1st</p>
		   <button id="btn" title="Add funds">+</button>
		   <!-- <button  id="btn" title="Add funds">+</button> -->

				<!-- The Modal -->
				<div id="myModal" class="pop">
				
				  <!-- Modal content -->
				  <div class="pop-content">
				    <div class="pop-header">
				      <span class="close">&times;</span>
				      <div class="sa" id="headerPop">Add Funds To Your Account</div> 
				    </div>
				    <div id="extraData" class="pop-body">
				        
				         <div id="oopsPop" style="display: block;">
				        	</div>				        				     
				     <div >Add Cash</div>
					 <div >
				            <div >
				               <span class="Code">Rs.</span>
				               <input type="text" id="balance"  value="25" />
							   <div class="">ADD MORE CASH</div></br>
				               <div class="amount">
							   <input type="button" id="txt1" value="+ Rs.125" onClick="sum(this);" />
							   <input type="button" id="txt2" value="+ Rs.250" onClick="sum(this);" />
							   <input type="button" id="txt3" value="+ Rs.600" onClick="sum(this);" />
							   </div></br>
							   <div class="btnRow">
								<input type="submit" id="recharge" name="recharge" class="addMoneySubmit" value="ADD CASH" >
							   </div> </br>
				           </div>
				        </div>
				     
				     
				    </div>
				    
				  </div>
				
				</div>
				
				
		   </div>
		   
		   
		   <br><br><br>

		   
		   <div class="right">   
				   <!-- Trigger/Open The Modal -->
				<!-- <button id="myBtn">Open Modal</button> -->
				<p>2nd</p>
				<button id="btn1" title="Add funds">+</button>
				<!-- <button  id="btn" title="Add funds">join</button> -->
	
		   </div>

＆＃13;

＆＃13;

＆＃13;