javascript - Two or Three modal windows in one page -
i trying make there 2 or 3 modal windows in 1 page. trying stuff in jsfiddle, can't open second modal window. tried stuff recommended in other discussion.
https://jsfiddle.net/01a83ud3/5/
css code
// modal var modal = document.getelementbyid('mymodal'); // button opens modal // <span> element closes modal var close = document.getelementbyid("close"); var bigclose = document.getelementbyid("bigclose"); // when user clicks button, open modal document.getelementbyid("mybtn").onclick = function() { modal.style.display = "block"; } // when user clicks on <span> (x), close modal close.onclick = function() { modal.style.display = "none"; } bigclose.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"; } } //bilde merch beigas // modal var modal1 = document.getelementbyid('mymodal1'); // button opens modal // <span> element closes modal var close1 = document.getelementbyid("close1"); var bigclose1 = document.getelementbyid("bigclose1"); // when user clicks button, open modal document.getelementbyid("mybtn1").onclick = function() { modal1.style.display = "block"; } // when user clicks on <span> (x), close modal close1.onclick = function() { modal1.style.display = "none"; } bigclose1.onclick = function() { modal1.style.display = "none"; } // when user clicks anywhere outside of modal, close window.onclick = function(event) { if (event.target == modal1) { modal1.style.display = "none"; } } html code
<div class="containerhome1"> <!-- end slide show --> <div class="col-md-4 col-sm-4 col-xs-12 suaboutlogo bottlez"> <img type="button" value="submit" id="mybtn" alt="rbs bottle" title="rbs bottle" src="{{ site.baseurl }}/img/bot5.jpg" style="width: 100%; margin-bottom: 20px;" class="bottlex"> <h2 align="center" class="title"><font size="5em">rbs bottle</font> </h2> <p align="center"> <font size="5em" color="#900028" style="font- weight: 700;">12eur</p></font> </div> <div class="col-md-4 col-sm-4 col-xs-12 suaboutlogo bottlez"> <img type="button" value="submit" id="mybtn1" alt="rbs sweater" title="rbs sweater" src="{{ site.baseurl }}/img/bot6.jpg" style="width: 100%; margin-bottom: 20px;" class="bottlex"> <h2 align="center" class="title"><font size="5em">rbs sweater</font> </h2> <p align="center"> <font size="5em" color="#900028" style="font- weight: 700;">25eur</p></font> </div> <div id="mymodal" class="modal"> <div class="smallscreen"> <!-- modal content --> <div class="modal-content small"> <div class="modal-header"> <span id="close" class="close">×</span> <h2 align="center">rbs bottle</h2> </div> <div class="modal-body"> <div class="smallmerch"> <img src="{{ site.baseurl }}/img/bot7.jpg" style="width:100%; margin-top: 20px;"> <h2 align="center" class="title" style="margin-top: 30px;"><font size="5em">rbs bottle</font></h2> <p align="center"> <font size="5em" color="#900028" style="font- weight: 700;">12eur</p></font> <p style="padding-left: 20px; padding-right: 20px;"> 1 , bottle of riga business school serves whopping amount of water, equal 7 plastic glasses, available @ rbs. made highest quality materials cool white cap top off. </p> <p style="padding-left: 20px; padding-right: 20px;"> purchase product, contact of board members personally, write su on <a class="hoverred" href="https://www.facebook.com/rbsstudentunion" target="_blank">facebook</a>, or fill out form below. respond e-mail written below (information necessary writing invoice , not used elsewhere).</p> <div class="col-1-3" style="margin-top: 0px;"> <h1 class="contactus" style="color: #900028; font-weight: 600; margin- top: 0px;">buy now</h1> <div id="formview"> <form method="post" action="http://formspree.io/student.union@rbs.lv"> <div class="mini"> <input required class="merchform" type="email" name="email" placeholder="your email"> </div> <div class="mini"> <textarea required class="merchform" name="message" placeholder="name"> </textarea> <textarea required class="merchform" name="message" placeholder="surname"> </textarea> <p style="margin-bottom: 2px; font-weight: 600; color: #900028;">payment method:</p> <input type="radio" name="method" value="cash" style="width: inherit;"><a style="margin-bottom: 2px; font-weight: 600; color: #900028;"> cash</a><br> <input style="width: inherit;" type="radio" name="method" value="online" checked="checked" ><a style="margin-bottom: 2px; font-weight: 600; color: #900028;"> online payment</a><br> <p style="margin-bottom: 2px; font-weight: 600; color: #900028;">quantity: </p> <input type="number" name="quantity" min="1" value="1" style="width: 100%;"> </div> <div class="mini"> <button type="submit">send</button> </div> </form> </div> </div> </div> </div> <div class="modal-footer"> </div> </div> </div> <div class="computerscreen"> <!-- modal content --> <div class="modal-content big"> <div class="modal-header"> <span id="bigclose" class="bigclose">×</span> <h2 align="center">rbs bottle</h2> </div> <div class="modal-body"> <div class="merch-bilde"> <img src="{{ site.baseurl }}/img/bot7.jpg" style="width:100%" class="widebot"> </div> <div class="merch-teksts"> <h2 align="center" class="title" style="margin-top: 30px;"><font size="5em">rbs bottle</font></h2> <p align="center"> <font size="5em" color="#900028" style="font- weight: 700;">12eur</p></font> <p style="padding-left: 20px; padding-right: 20px;"> 1 , bottle of riga business school serves whopping amount of water, equal 7 plastic glasses, available @ rbs. made highest quality materials cool white cap top off. </p> <p style="padding-left: 20px; padding-right: 20px;"> purchase product, contact of board members personally, write su on <a class="hoverred" href="https://www.facebook.com/rbsstudentunion" target="_blank">facebook</a>, or fill out form below. respond e-mail written below (information necessary writing invoice , not used elsewhere).</p> <div class="col-1-3" style="margin-top: 0px;"> <h1 class="contactus" style="color: #900028; font-weight: 600; margin- top: 0px;">buy now</h1> <div id="formview"> <form method="post" action="http://formspree.io/student.union@rbs.lv"> <div class="mini"> <input required class="merchform" type="email" name="email" placeholder="your email"> </div> <div class="mini"> <textarea required class="merchform" name="message" placeholder="name"></textarea> <textarea required class="merchform" name="message" placeholder="surname"></textarea> <p style="margin-bottom: 2px; font-weight: 600; color: #900028;">payment method:</p> <input style="width: inherit;" type="radio" name="method" value="cash" ><a style="margin-bottom: 2px; font-weight: 600; color: #900028;"> cash</a> <br> <input style="width: inherit;" type="radio" name="method" value="online" checked="checked" ><a style="margin-bottom: 2px; font-weight: 600; color: #900028;"> online payment</a><br> <p style="margin-bottom: 2px; font-weight: 600; color: #900028;">quantity: </p> <input style="width: 100%;" type="number" name="quantity" min="1" value="1"> </div> <div class="mini"> <button type="submit">send</button> </div> </form> </div> </div> </div> </div> <div class="modal-footer"> </div> </div> </div> <!-- modal 1 end --> <div id="mymodal1" class="modal"> <div class="smallscreen"> <!-- modal content --> <div class="modal-content small"> <div class="modal-header"> <span id="close1" class="close">×</span> <h2 align="center">rbs sweater</h2> </div> <div class="modal-body"> <div class="smallmerch"> <img src="{{ site.baseurl }}/img/bot6.jpg" style="width:100%; margin-top: 20px;"> <h2 align="center" class="title" style="margin-top: 30px;"><font size="5em">rbs sweater</font></h2> <p align="center"> <font size="5em" color="#900028" style="font- weight: 700;">25eur</p></font> <p style="padding-left: 20px; padding-right: 20px;"> rbs sweater available purchase! </p> <p style="padding-left: 20px; padding-right: 20px;"> purchase product, contact of board members personally, write su on <a class="hoverred" href="https://www.facebook.com/rbsstudentunion" target="_blank">facebook</a>, or fill out form below. respond e-mail written below (information necessary writing invoice , not used elsewhere).</p> <div class="col-1-3" style="margin-top: 0px;"> <h1 class="contactus" style="color: #900028; font-weight: 600; margin- top: 0px;">buy now</h1> <div id="formview"> <form method="post" action="http://formspree.io/student.union@rbs.lv"> <div class="mini"> <input required class="merchform" type="email" name="email" placeholder="your email"> </div> <div class="mini"> <textarea required class="merchform" name="message" placeholder="name"> </textarea> <textarea required class="merchform" name="message" placeholder="surname"> </textarea> <p style="margin-bottom: 2px; font-weight: 600; color: #900028;">payment method:</p> <input type="radio" name="method" value="cash" style="width: inherit;"><a style="margin-bottom: 2px; font-weight: 600; color: #900028;"> cash</a><br> <input style="width: inherit;" type="radio" name="method" value="online" checked="checked" ><a style="margin-bottom: 2px; font-weight: 600; color: #900028;"> online payment</a><br> <p style="margin-bottom: 2px; font-weight: 600; color: #900028;">quantity: </p> <input type="number" name="quantity" min="1" value="1" style="width: 100%;"> </div> <div class="mini"> <button type="submit">send</button> </div> </form> </div> </div> </div> </div> <div class="modal-footer"> </div> </div> </div> <div class="computerscreen"> <!-- modal content --> <div class="modal-content big"> <div class="modal-header"> <span id="bigclose1" class="bigclose">×</span> <h2 align="center">rbs sweater</h2> </div> <div class="modal-body"> <div class="merch-bilde"> <img src="{{ site.baseurl }}/img/bot7.jpg" style="width:100%" class="widebot"> </div> <div class="merch-teksts"> <h2 align="center" class="title" style="margin-top: 30px;"><font size="5em">rbs bottle</font></h2> <p align="center"> <font size="5em" color="#900028" style="font- weight: 700;">12eur</p></font> <p style="padding-left: 20px; padding-right: 20px;"> rbs sweater available purchase! </p> <p style="padding-left: 20px; padding-right: 20px;"> purchase product, contact of board members personally, write su on <a class="hoverred" href="https://www.facebook.com/rbsstudentunion" target="_blank">facebook</a>, or fill out form below. respond e-mail written below (information necessary writing invoice , not used elsewhere).</p> <div class="col-1-3" style="margin-top: 0px;"> <h1 class="contactus" style="color: #900028; font-weight: 600; margin- top: 0px;">buy now</h1> <div id="formview"> <form method="post" action="http://formspree.io/student.union@rbs.lv"> <div class="mini"> <input required class="merchform" type="email" name="email" placeholder="your email"> </div> <div class="mini"> <textarea required class="merchform" name="message" placeholder="name"></textarea> <textarea required class="merchform" name="message" placeholder="surname"></textarea> <p style="margin-bottom: 2px; font-weight: 600; color: #900028;">payment method:</p> <input style="width: inherit;" type="radio" name="method" value="cash" ><a style="margin-bottom: 2px; font-weight: 600; color: #900028;"> cash</a><br> <input style="width: inherit;" type="radio" name="method" value="online" checked="checked" ><a style="margin-bottom: 2px; font-weight: 600; color: #900028;"> online payment</a><br> <p style="margin-bottom: 2px; font-weight: 600; color: #900028;">quantity: </p> <input style="width: 100%;" type="number" name="quantity" min="1" value="1"> </div> <div class="mini"> <button type="submit">send</button> </div> </form> </div> </div> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> <div style="height: 100px;"></div> here approximate jsfiddle code. css should not necessary change, must obvioussly id's in js or html tab. modals should appear when clicking alt text of images not available there.
looking help.
Comments
Post a Comment