Wie kann ich ein "div" -Element einblenden und den Bildschirm verdunkeln?

In Ordnung, ich habe mich ein paar Seiten angesehen und this ist am nächsten, was ich will, irgendwie.Wie kann ich ein "div" -Element einblenden und den Bildschirm verdunkeln?

möchte ich eine Schaltfläche, um eine div zeigen, (ich dies über einen Spoiler Code tun kann, ich habe), Dann möchte ich die gleiche Taste wie der Bildschirm dimmen in den obigen Link, jetzt, was ich -Kann t-do. ist dies eine Umschalttaste. Ich könnte etwas Grundlegendes vermissen, aber ich weiß es nicht.

hier unten habe ich html mit einer Schaltfläche, die eine div mit "Hallo" darin angezeigt wird, möchte ich es also, wenn "Hallo" erscheint, wird es den Bildschirm dimmen, aber die Taste erneut drücken (oder) klicken aus der div, wird der Bildschirm wieder normal.

Dies ist mein Code:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <button onclick="if(document.getElementById('spoiler-') .style.display=='none') {document.getElementById('spoiler-') .style.display=''}else{document.getElementById('spoiler-') .style.display='none'}">Spoiler</button> 
    <div id="spoiler-" style="display:none"> 
    <p style="border: 2px solid gray;">Hello!</p> 
    </div> 
</body> 
</html>

Danke, dass Sie Zeit nehmen, diese zu lesen. hoffen, dass dies bald herausfinden> _ <

Quelle

2017-01-28 Smokezarn

Bevor ich möchte ich Sie beginnen, daran zu erinnern, nicht Inline JS oder CSS zu verwenden, es ist eine schlechte Praxis, nicht sehr leicht zu lesen und Sie sollten immer Ihre HTML trennen, CSS & JS .

Nun zu Ihrer Frage, anstatt das Rad neu zu erfinden, möchten Sie vielleicht einen Blick auf dieses wirklich ordentliche Framework namens BootStrap werfen.

Fügen Sie diese Links und Scripts in Ihrem Kopf-Datei:

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /> 
<!-- We need jQuery to make bootstrap.min.js work --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Hier ist ein funktionierendes Beispiel für eine Bootstrap-modal:

$("#myModal").on("show.bs.modal", function(event) { 
 
    console.log("Modal has been shown, do something amazing now!"); 
 
});

.modal-backdrop { 
 
    background-color: #333; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /> 
 
<!-- We need jQuery to make bootstrap.min.js work --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal" id="modalOne">Button</button> 
 
<!-- Modal --> 
 
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button class="close" data-dismiss="modal" type="button"> 
 
      <span aria-hidden="true">&times;</span> <span class="sr-only">Close</span> 
 
     </button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem. 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-default" data-dismiss="modal" type="button">Close</button> 
 
     <button class="btn btn-primary" type="button">OK</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Sie können auch den Hintergrund ändern Farbe, indem Sie die background-color Eigenschaft unter der .modal-backdrop Klasse in Ihrem CSS ändern.

Wenn Sie zusätzliche Hilfe mit BootStrap benötigen, können Sie here starten, um mit BootStrap zu beginnen.

Viel Glück und alles Gute.

Quelle

2017-01-28 01:51:01

bitte ein Beispiel funktional –

@ x-rw Was meinst du damit? –

Code in der Snipet bitte –

Wie kann ich ein "div" -Element einblenden und den Bildschirm verdunkeln?

Antwort

Verwandte Themen