jquery - Open Corresponding Popups for Various buttons in Javascript -
my html file has number of icon images (all images have same class attribute) , same number of html snippets represent modal/popup (they have same class name). icons , popup snippets come in pairs , generated dynamically means exact number of pairs unknown. html code looks -
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample"> <div class="tooltip_modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h5>tooltip</h5> </div> <div class="modal-body"> <p>sample text 1</p> </div> </div> </div> <img src="/images/info_icon.gif" class="tooltip_icon" alt="sample"> <div class="tooltip_modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h5>tooltip</h5> </div> <div class="modal-body"> <p>sample text 2</p> </div> </div> </div> <img src="/images/info_icon.gif" class="tooltip_icon" alt="sample"> <div class="tooltip_modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h5>tooltip</h5> </div> <div class="modal-body"> <p>some text 3</p> </div> </div> </div> please note text each modal different. want create logic in javascript clicking on icon opens corresponding model. example - clicking first icon should show "sample text 1" , clicking second icon should show "sample text 2".
below js code (obviously) doesn't work:
var btn = document.getelementsbyclassname("tooltip_icon"); var modal = document.getelementsbyclassname("tooltip_modal"); // <span> element closes modal var span = document.getelementsbyclassname("close")[0]; // when user clicks button, open modal function displaymodal(k) { modal[k].style.display = "block"; } // when user clicks on <span> (x), close modal function hidemodal(k) { modal[k].style.display = "none"; } (var i=0,j=0; i<btn.length,j<modal.length; i++,j++) { btn[i].onclick = displaymodal(j); span.onclick = hidemodal(j); window.onclick = function(event) { if (event.target == modal[j]) { hidemodal(j); } } } what trying here loop through icons , modals , every icon[i] trying call modal[j].
jsfiddle code - https://jsfiddle.net/2orwct27/
please help! in advance
okay,
there several problems in code. rewrote whole code idea wrong in code , how your solution may like.
keep in mind, wrote uses language features not browsers support. in modern browsers run fine.
function openwindow(modal) { modal.style.display = 'block'; settimeout(() => { document.addeventlistener('click', closemodal); }); } function closewindow(modal) { modal.style.display = 'none'; settimeout(() => { document.removeeventlistener('click', closemodal); }); } function closemodal(e) { const modal = getmodalroot(e.target); if (modal) return; [].foreach.call(document.queryselectorall('.tooltip_modal'), closewindow); } function getmodalroot(element) { if (!element || !element.classlist) return null; if (element.classlist.contains('modal-content')) return element; return getmodalroot(element.parentnode); } [].foreach.call(document.queryselectorall('.tooltip_icon'), (x, i) => { x.id = `opener${i}`; const modal = x.queryselector(`#${x.id} ~ .tooltip_modal`); x.addeventlistener('click', () => { openwindow(modal); }); modal.queryselector('.close').addeventlistener('click', () => { closewindow(modal); }); });/* modal (background) */ .tooltip_modal { 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 */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; 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.4s; animation-name: animatetop; animation-duration: 0.4s } /* 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; } .modal-header { padding: 2px 16px; background-color: #425563; border-bottom: 4px solid #ffd100; color: white; } .modal-body {padding: 10px 16px;} .modal-footer { padding: 2px 16px; background-color: #5cb85c; color: white; } /* tooltip icon*/ .tooltip_icon { padding-bottom: 4px; padding-left: 2px; }<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample"> <div class="tooltip_modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h5>tooltip</h5> </div> <div class="modal-body"> <p>sample text one</p> </div> </div> </div> <img src="/images/info_icon.gif" class="tooltip_icon" alt="sample"> <div class="tooltip_modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h5>tooltip</h5> </div> <div class="modal-body"> <p>sample text 2</p> </div> </div> </div> <img src="/images/info_icon.gif" class="tooltip_icon" alt="sample"> <div class="tooltip_modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h5>tooltip</h5> </div> <div class="modal-body"> <p>some text 3</p> </div> </div> </div>first of didn't change html or css.
what's different
instead of looping thru images , modal-elements , change there html, add eventlistener images , each close-element.
for functions show , hide modal get's modal instead it's index.
in code check on click if click target equals model. if should close it. in comment in code wan't other way around. because guess natural behavior way it's implemented in snipped.
Comments
Post a Comment