javascript - I had getting an error on 2nd button for popup, in this I want two different popups by pressing 2nd button extra popup will be empty with join button -
// modal var modal = document.getelementbyid('mymodal'); // button opens modal var btn = document.getelementbyid("btn"); var cat = document.getelementbyid("cat"); // <span> element closes modal var span = document.getelementsbyclassname("close")[0]; // when user clicks button, open 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 account"; document.getelementbyid("oopspop").innerhtml = ""; modal.style.display = "block"; } // first popup working fine pressing 2nd button not getting popup. // in 2nd popup see current balance , joining amount , add cash text box. // if joining amount less current balance popup join button else greater current balance calculate remaining amount in add cash text box equal joining amount 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> <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 account join 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 user clicks on <span> (x), close modal span.onclick = function() { modal.style.display = "none"; } // when user clicks anywhere outside of modal, close 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; } /* modal (background) */ .pop { display: none; /* hidden default */ position: fixed; /* stay in place */ z-index: 1; /* sit on top */ padding-top: 100px; /* location of 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 { {top: -300px; opacity:0} {top:0; opacity:1} } @keyframes animatetop { {top: -300px; opacity:0} {top:0; opacity:1} } /* 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: 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> --> <!-- modal --> <div id="mymodal" class="pop"> <!-- modal content --> <div class="pop-content"> <div class="pop-header"> <span class="close">×</span> <div class="sa" id="headerpop">add funds 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 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>
remove jquery append , use javascript add html in it.
document.getelementbyid('oopspop').innerhtml = "your html" // modal var modal = document.getelementbyid('mymodal'); // button opens modal var btn = document.getelementbyid("btn"); var cat = document.getelementbyid("cat"); // <span> element closes modal var span = document.getelementsbyclassname("close")[0]; // when user clicks button, open 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 account"; document.getelementbyid("oopspop").innerhtml = ""; modal.style.display = "block"; } // first popup working fine pressing 2nd button not getting popup. // in 2nd popup see current balance , joining amount , add cash text box. // if joining amount less current balance popup join button else greater current balance calculate remaining amount in add cash text box equal joining amount 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> <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 account join 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 user clicks on <span> (x), close modal span.onclick = function() { modal.style.display = "none"; } // when user clicks anywhere outside of modal, close 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; } /* modal (background) */ .pop { display: none; /* hidden default */ position: fixed; /* stay in place */ z-index: 1; /* sit on top */ padding-top: 100px; /* location of 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 { {top: -300px; opacity:0} {top:0; opacity:1} } @keyframes animatetop { {top: -300px; opacity:0} {top:0; opacity:1} } /* 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: 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> --> <!-- modal --> <div id="mymodal" class="pop"> <!-- modal content --> <div class="pop-content"> <div class="pop-header"> <span class="close">×</span> <div class="sa" id="headerpop">add funds 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 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>
Comments
Post a Comment