Heim > Schlagzeilen > js und css zur Implementierung der Login-Popup- und Center-Methode

js und css zur Implementierung der Login-Popup- und Center-Methode

小云云
Freigeben: 2017-11-29 10:33:31
Original
1780 Leute haben es durchsucht

Wir alle wissen, dass js dynamische Effekte erzielen kann und dass viele Funktionen dies benötigen. In diesem Artikel werden wir eine kleine in js und css geschriebene Funktion vorstellen, mit der eine Popup-Anmeldeschnittstelle realisiert wird . Gleichzeitig wird die Hintergrundfarbe dunkler.

Schauen wir uns zunächst den Effekt an:

js und css zur Implementierung der Login-Popup- und Center-Methode

Klicken Sie hier, um ein Fotoalbum zu erstellen

js und css zur Implementierung der Login-Popup- und Center-Methode

HTML-Code

Schaltfläche „Erstellen“

<li id="create"><a href="#form" rel="external nofollow" ><span>创建相册</span></a></li>
Nach dem Login kopieren

Hintergrund-Div und Formular-Div

<div class="background"></div>
  
<div id="form">
  <div class="fh">
    <h1>创建相册</h1>
    <a class="close"><img  src="pics/close.png" / alt="js und css zur Implementierung der Login-Popup- und Center-Methode" ></a>
  </div>
  ...
</div>
css代码
.background {
  display: none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:#fff;
  background:-moz-radial-gradient(50% 50%, #fff, #000);/*gradient for firefox*/
  background:-webkit-radial-gradient(50% 50%, #fff, #000);/*new gradient for webkit */
  background:-webkit-gradient(radial, 0 50%, 0 50%, from(#fff), to(#000));/*the old grandient for webkit*/
  opacity:0.5;
  filter:Alpha(opacity=50);
}
#form {
  display: none;
  position:fixed;
  border: 1px solid #ccc;   
  background-color:white;
  top:30%;
  left:30%;
  width: auto;
  border-radius:15px;
  -moz-border-radius:15px;
  box-shadow:0 5px 27px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 5px 27px rgba(0,0,0,0.3);
  -moz-box-shadow:0 5px 27px rgba(0,0,0,0.3);
}
Nach dem Login kopieren

JavaScript Code

function showForm() {
  var create = document.getElementById("create");
  var bg = document.getElementsByClassName("background")[0];
  var form = document.getElementById("form");
  var links = document.getElementsByClassName("close");
  for(var i=0;i<links.length;i++) {
    links[i].onclick = function() {
    form.style.display = "none";
    bg.style.display = "none";
    }
  }
  create.onclick = function() {
    form.style.display = "block";
    bg.style.display = "block";
  }
Nach dem Login kopieren

Das Hauptprinzip besteht darin, das Anzeigeattribut des Hintergrund-Divs und des Form-Divs zu ändern. Wenn der Wert Block ist, wird er angezeigt, und wenn der Wert keiner ist, das Element verschwindet. Und position:fixed; Ist relativ zum aktuellen Fenster.

Der obige Inhalt ist eine kleine Funktion, die von js und css zusammen implementiert wird. Ich hoffe, dass sie allen helfen kann.

Verwandte Empfehlungen:

So realisieren Sie den Popup-Effekt von Eingabeaufforderungstext in CSS3

So verwenden Sie js zum Übergeben von Parametern in PHP-Popup-Fenster

Eine Zusammenfassung von Beispielen für die Verwendung von JavaScript zum Schließen des Popup-Fenstereffekts

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage