Ereignis-Listener-Attribut in einem div durch Javascript

Question

Meine div sieht wie folgt zu ändern:

<div id="modal" 
    style="position: fixed; 
     left: 0px; 
     top: 0px; 
     width: 100%; 
     height: 100%; 
     opacity: 0.4; 
     background-color: rgb(204, 204, 204); 
     display: block; 
     z-index: 99;"> 
</div> 

ich etwas passieren soll, wenn meine div Änderungen an (Anmerkung: Anzeigeblock zu keinem geändert haben):

<div id="modal" 
    style="position: fixed; 
     left: 0px; 
     top: 0px; 
     width: 100%; 
     height: 100%; 
     opacity: 0.4; 
     background-color: rgb(204, 204, 204); 
     display: none; 
     z-index: 99;"> 
</div> 

ich über einen Eventlistener dachte, hat jemand eine Idee, wie diese Arbeit zu bekommen?

Answer 1

könnten Sie verwenden einen MutationObserver

So etwas wie

var target = document.getElementById('modal'); 

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    if (mutation.attributeName === 'style') { 
     ... 
    } 
    });  
}); 

Answer 2

Sie können für die Doppel-Klick hören und dann ausführen:

• eine Funktion, um die CSS zu ändern; und
• eine andere Funktion für was auch immer geschehen soll, nachdem die CSS ändert

Beispiel:

var records = document.getElementsByClassName('record'); 

function changeCSS() { 

    [... CODE HERE...] 

} 

function doSomethingElse() { 

    [... CODE HERE...] 

} 

for (var i = 0; i < records.length; i++) { 
    var record = records[i]; 
    record.addEventListener('dblclick', function(){changeCSS(); doSomethingElse();}, false); 
} 

Answer 3

Fügen Sie das folgende Skript in Ihrem Code. Sie müssen set interval oder timeout-Funktion verwenden, um div als keine anzuzeigen.

Unten habe ich setTimeout() -Funktion verwendet, so nach 2 Sekunden 'Anzeige: keine' Stil auf das Div angewendet werden.

$(document).ready(function(){   
      setTimeout(function() { 
       $('#modal').css('display','none'); 
      }, 2000); 

     }); 

Answer 4

Wenn bereits ein Doppelklick Ereignis geschieht, wenn der Benutzer die Tabelle klickt, können Sie auf dieses Ereignis mit dem .dblclick(function()

Zum Beispiel hören:

Script:

$(document).ready(function(){ 
     $("#modal").dblclick(function(){ 
      $(this).toggleClass('newClass'); 
     }); 
    }); 

CSS:

.newClass 
{ 
    width:100%, 
    height:100%, 
    background-color: rgb(204, 204, 204); 
    ... 
    ... 
} 

Answer 5

Wenn Sie zwischen der Anzeige ein- und ausblenden wechseln möchten, entfernen Sie die Kommentarzeichen für die kommentierten Tags. macht auch "$ ('div # modal') auf ('Klick', function() {." und "$ ('div # modal') verstecken();". als Kommentar

$('div#modal').show(); 
 
    // $('button').on('click',function(){ 
 
    $('div#modal').on('click', function() { 
 
    //$(this).css("display","none"); 
 
    //event.stopPropagation(); 
 
    //$('div#modal').toggle(); 
 
    $('div#modal').hide(); 
 
    })

<div id="modal" style="position: fixed; 
 
      left: 0px; 
 
      /*top: 50px;*/ 
 
      top:0px; 
 
      width: 100%; 
 
      height: 100%; 
 
      opacity: 0.4; 
 
      background-color: rgb(204, 204, 204); 
 
      z-index: 99;"> 
 
</div> 
 
<br> 
 
<!--<button>Click</button>--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Good Luck !!!