2017-06-23 21 views
-2

Element wurde nicht angezeigt auf Schaltfläche klicken.Element wird nicht beim Klicken auf die Schaltfläche angezeigt

var modal = document.getElementById('comments-main'); 
 
var btn = $("a#comments-btn"); 
 
var span = $("close"); 
 
btn.click = function() { 
 
    if (modal.style.display == 'block') { 
 
    modal.style.display = "none"; 
 
    } else { 
 
    modal.style.display = "block"; 
 
    } 
 
} 
 
span.onclick = function() { 
 
    if (modal.style.display == 'block') { 
 
    modal.style.display = "none"; 
 
    } 
 
} 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
}
#comments-btn { 
 
    float: left; 
 
    margin-left: 50px; 
 
} 
 

 
.comments-modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    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 */ 
 
    -webkit-animation-name: fadeIn; 
 
    /* Fade in the background */ 
 
    -webkit-animation-duration: 0.4s; 
 
    animation-name: fadeIn; 
 
    animation-duration: 0.4s; 
 
} 
 

 
.comments-content { 
 
    position: fixed; 
 
    bottom: 0; 
 
    background-color: #fefefe; 
 
    width: 100%; 
 
} 
 

 
.close { 
 
    color: white; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: red; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
.comments-header { 
 
    padding: 2px 16px; 
 
    background-color: orange; 
 
    /* #5cb85c */ 
 
    color: white; 
 
    font-size: 15px; 
 
    border-left: 1.5px solid black; 
 
    border-right: 1.5px solid black; 
 
    border-top: 1.5px solid black; 
 
    border-bottom: 1.5px solid black; 
 
    border-radius: 1px; 
 
    text-shadow: -1px 3px 3px white, 3px 4px 5px red, 6px 9px 12px black; 
 
} 
 

 
.comments-body { 
 
    padding: 2px 16px; 
 
    font-size: 15px; 
 
    font-style: italic; 
 
    border-left: 1.5px solid black; 
 
    border-right: 1.5px solid black; 
 
    border-radius: 1px; 
 
} 
 

 
.comments-modal-footer { 
 
    padding: 2px 16px; 
 
    background-color: orange; 
 
    border-left: 1.5px solid black; 
 
    border-right: 1.5px solid black; 
 
    border-bottom: 1.5px solid black; 
 
    border-radius: 1px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="comments-main" class="comments-modal"> 
 
    <div class="comments-content"> 
 
    <div class="comments-header"> 
 
     <span class="close">&times;</span> 
 
     <h2> Shikor - FB Comments </h2> 
 
    </div> 
 
    <div class="comments-body"> 
 
     <p>Facebook Comments Count: <span class="fb-comments-count" data-href="http://br-gaming.tk"></span></p><br /> 
 
     <center> 
 
     <div class="fb-comments" data-href="http://br-gaming.tk" data-width="600" data-numposts="5" data-colorscheme="dark"></div> 
 
     </center> 
 
    </div> 
 
    <div class="comments-modal-footer"></div> 
 
    </div> 
 
</div> 
 

 
<a class="w3-button w3-xlarge w3-circle w3-orange w3-card-4" id="comments-btn" href="#" onclick="return false;"><i class="fa fa-comments-o" aria-hidden="true"></i>Click here</a>

Auf Schaltfläche klicken, um es nichts zeigt.

+0

Uhhh ... welche Taste? Dein Auszug zeigt nichts. Sie hängen Ereignishandler nicht ordnungsgemäß an Ihre jQuery-Objekte an. Siehe http://api.jquery.com/click –

+3

@RoryMcCrossan Es ist die alte 'Eisbär in einem Schneesturm' Demo – j08691

+0

Bitte überprüfen Sie [fragen] und aktualisieren Sie Ihre Frage, um eine [MCVE] zu enthalten. So wie es steht, ist diese Frage [Off-Topic (# 1)] (/ help/on-topic). – zzzzBov

Antwort

0

Ändern Sie diese Click-Ereignis btn.click = function() { //do sth }

zu

btn.on("click", function() { //do sth });

+0

hat auch nicht funktioniert :(check https://jsfiddle.net/afjqph88/ –

+0

@John_Magdy Es würde nicht funktionieren, wenn Sie externe Bibliothek jquery nicht einschließen Inspect Element Browser Sie würden sehen ** $ ist nicht definiert **, weil Jquery nicht laden. Https://jsfiddle.net/afjqph88/1/ – Sovary

+0

hinzugefügt https : //jsfiddle.net/afjqph88/10/ aber hat nicht funktioniert ... :( –

0

Sie benötigen Funktionen btn.click = function() {...}-btn.click(function() {...}); zu ändern.

var modal = document.getElementById('comments-main'); 
 
var btn = $("a#comments-btn"); 
 
var span = $(".close"); 
 
btn.click(function() { 
 
    if (modal.style.display == 'block') { 
 
    modal.style.display = "none"; 
 
    } else { 
 
    modal.style.display = "block"; 
 
    } 
 
}); 
 
span.click(function() { 
 
    if (modal.style.display == 'block') { 
 
    modal.style.display = "none"; 
 
    } 
 
});
#comments-btn { 
 
    float: left; 
 
    margin-left: 50px; 
 
} 
 

 
.comments-modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    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 */ 
 
    -webkit-animation-name: fadeIn; 
 
    /* Fade in the background */ 
 
    -webkit-animation-duration: 0.4s; 
 
    animation-name: fadeIn; 
 
    animation-duration: 0.4s; 
 
} 
 

 
.comments-content { 
 
    position: fixed; 
 
    bottom: 0; 
 
    background-color: #fefefe; 
 
    width: 100%; 
 
} 
 

 
.close { 
 
    color: white; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: red; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
.comments-header { 
 
    padding: 2px 16px; 
 
    background-color: orange; 
 
    /* #5cb85c */ 
 
    color: white; 
 
    font-size: 15px; 
 
    border-left: 1.5px solid black; 
 
    border-right: 1.5px solid black; 
 
    border-top: 1.5px solid black; 
 
    border-bottom: 1.5px solid black; 
 
    border-radius: 1px; 
 
    text-shadow: -1px 3px 3px white, 3px 4px 5px red, 6px 9px 12px black; 
 
} 
 

 
.comments-body { 
 
    padding: 2px 16px; 
 
    font-size: 15px; 
 
    font-style: italic; 
 
    border-left: 1.5px solid black; 
 
    border-right: 1.5px solid black; 
 
    border-radius: 1px; 
 
} 
 

 
.comments-modal-footer { 
 
    padding: 2px 16px; 
 
    background-color: orange; 
 
    border-left: 1.5px solid black; 
 
    border-right: 1.5px solid black; 
 
    border-bottom: 1.5px solid black; 
 
    border-radius: 1px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="comments-main" class="comments-modal"> 
 
    <div class="comments-content"> 
 
    <div class="comments-header"> 
 
     <span class="close">&times;</span> 
 
     <h2> Shikor - FB Comments </h2> 
 
    </div> 
 
    <div class="comments-body"> 
 
     <p>Facebook Comments Count: <span class="fb-comments-count" data-href="http://br-gaming.tk"></span></p><br /> 
 
     <center> 
 
     <div class="fb-comments" data-href="http://br-gaming.tk" data-width="600" data-numposts="5" data-colorscheme="dark"></div> 
 
     </center> 
 
    </div> 
 
    <div class="comments-modal-footer"></div> 
 
    </div> 
 
</div> 
 

 
<a class="w3-button w3-xlarge w3-circle w3-orange w3-card-4" id="comments-btn" href="#" onclick="return false;"><i class="fa fa-comments-o" aria-hidden="true"></i>button</a>

Verwandte Themen