html - Open a div by clicking a button, close the div by clicking outside only with CSS -


i have button opens , closes div. improve feature: want div close when pressing other on div. possible in css , html?

it's button 'top-bar-btn settings' :

edit 

<div class="top-bar-btn" id="top-bar-btn">   <button class="top-bar-btn create"           title="créer une nouvelle discussion">           <!--(click)="oncreatechatwindow()">-->     <i class="glyphicon glyphicon-edit"></i>   </button>     <button class="top-bar-btn settings"           title="réglages"           (click)="onsettingschatwindow()">     <i class="glyphicon glyphicon-cog"></i>   </button>   <div id="outside" (click)="hide()"></div>    <button class="top-bar-btn reduce"           title="réduire la fenêtre"           (click) = "onreducechatthreads()">     <i class="glyphicon glyphicon-minus"></i>   </button> </div> 

 <div class="settings-notification"    id="settings-notification"> <div class="tr triangle">   <div class="tr inner-triangle">   </div> </div> <div class="sound-signal">   signal sonore :   <input type="radio" name="soundsignal" id="soundsignal1" checked="checked">   <label for="soundsignal1">oui</label>   <input type="radio" name="soundsignal" id="soundsignal2">   <label for="soundsignal2">non</label> </div>  <div class="flash-signal">   signal visuel :   <input type="radio" name="flashsignal" id="flashsignal1" checked="checked" (click)="flashsignal()">   <label for="flashsignal1">oui</label>   <input type="radio" name="flashsignal" id="flashsignal2" (click)="notflashsignal()">   <label for="flashsignal2">non</label> </div>

>

#outside{ display:none; height:100%; width:100%; position:fixed; top:0px; left:0px; z-index:1; }   hide(): void {     document.getelementbyid('outside').style.display = 'none';     document.getelementbyid('settings-notification').style.display = 'none'; }  onsettingschatwindow(): void {     document.getelementbyid('outside').style.display = 'block';     document.getelementbyid('chat-threads').classlist.toggle('display-settings'); }

i not understand why not work. works once , after div no longer displays @ all. know why ?

you can't show/hide, move... objects using css or html only. can use javascript. make 2 divs display:none; 1 div want show, , 1 background(width , height 100%, z-index less div want show/hide more other element, , position:fixed;) inside div represents background add onclick="hide()" , call function hide() whenever click outside div. , add function hide() make both div-s disappear.

function myfunction(){  document.getelementbyid("outside").style.display = "block";  document.getelementbyid("mydiv").style.display = "block";  }    function hide(){  document.getelementbyid("outside").style.display = "none";  document.getelementbyid("mydiv").style.display = "none";  }
#outside{  display:none;  height:100%;  width:100%;  position:fixed;  top:0px;  left:0px;  z-index:1;  }    #mydiv{  background:red;  width:300px;  height:100px;  position:absolute;  top:100px;  left:100px;  display:none;  z-index:2;  }
<button onclick="myfunction()">show div</button>  <p><span>some text</span></p>  <p><span>some text</span></p>  <p><span>some text</span></p>  <p><span>some text</span></p>  <p><span>some text</span></p>  <div id="outside" onclick="hide()"></div>  <div id="mydiv"></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