javascript - Modal 'close' not working -


i've taken working script , adjusted allow multiple independent modals , no longer able close of modals. receive error:

cannot set property 'display' of undefined @ htmlspanelement.span.onclick

neither window.onclick or document.onclick functions working. here's jsfiddle

<div class="contentsection">     <a class="popupbtn" data-modal="modal-window-one">open me!</a> </div>  <div id="modal-window-one" class="popupmodal modal">     <span class="close">&times;</span>     <div class="modalcontent">         <p>here's content!</p>     </div> </div>  <div class="contentsection">     <a class="popupbtn" data-modal="modal-window-two">...or open me!</a> </div>  <div id="modal-window-two" class="popupmodal modal">     <span class="close">&times;</span>     <div class="modalcontent">         <p>here's different content!</p>     </div> </div>   var modal = document.getelementsbyclassname('popupmodal'); var btn = document.getelementsbyclassname("popupbtn"); var span = document.getelementsbyclassname("close")[0];  (var = 0; < btn.length; i++) {     var thisbtn = btn[i];     thisbtn.addeventlistener("click", function(){         var modal = document.getelementbyid(this.dataset.modal);         modal.style.display = "block";     }, false); }  span.onclick = function() {     modal.style.display = "none"; }  window.onclick = function(event) {     if (event.target == modal) {         modal.style.display = "none";     } }

modal htmlcollection (array object), have class popupmodal more 1 element. need iterate through array , set display = none all.

also, have assigned click first close element only, need iterate through span elements , attach click both span elements close both modal windows.

or, can iterate through modal array , attach event listener close modal if event.target span.

var modal = document.getelementsbyclassname('popupmodal');  var btn = document.getelementsbyclassname("popupbtn");  var span = document.getelementsbyclassname("close");    (var = 0; < btn.length; i++) {    var thisbtn = btn[i];    thisbtn.addeventlistener("click", function() {      var modal = document.getelementbyid(this.dataset.modal);      modal.style.display = "block";    }, false);  }      (var = 0; < modal.length; i++) {    modal[i].addeventlistener("click", function(e) {      if(e.target.classname === 'close') {        this.style.display = 'none';      }    }, false);  }
.popupbtn {    cursor: pointer;  }    .modal {    display: none;    position: fixed;    z-index: 1;    left: 0;    top: 0;    width: 100%;    height: 100%;    background-color: rgb(0, 0, 0);    background-color: rgba(0, 0, 0, 0.4);    cursor: pointer;  }    .modalcontent {    background-color: #fefefe;    margin: 15% auto;    padding: 20px;    border-top: 8px solid #81c8e8;    border-radius: 4px;    width: 50%;    box-shadow: 0px 2px 8px #222;    cursor: default;    font-size: .9em;  }    .close {    color: #ccc;    float: right;    font-size: 25pt;    font-weight: bold;    transition: ease-in-out .5s;    padding: 10px 30px;    background-color: #2b3d52;  }    .close:hover,  .close:focus {    color: #fff;    text-decoration: none;    cursor: pointer;  }
<div class="contentsection">    <a class="popupbtn" data-modal="modal-window-one">open me!</a>  </div>    <div id="modal-window-one" class="popupmodal modal">    <span class="close">&times;</span>    <div class="modalcontent">      <p>        here's content!      </p>    </div>  </div>    <div class="contentsection">    <a class="popupbtn" data-modal="modal-window-two">...or open me!</a>  </div>    <div id="modal-window-two" class="popupmodal modal">    <span class="close">&times;</span>    <div class="modalcontent">      <p>        here's different content!      </p>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more