Auto-popup-Fenster mit Schaltfläche schließen, die mit html, CSS

Hallo ich habe code generiert ein popup auf den button klicken.
Aber kann irgend jemand bitte ändern mein code, so dass ich Sie einfügen können den code in meine Seite und erhalten eine auto-popup auf meine Seite zu laden.

Möchte ich fügen Sie diesen code in Seite Erfolg des Projekts, die angezeigt wird nach Abschluss der form.

CSS:

.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid orange;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: orange;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

HTML:

<div class="box">
	<a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
	<div class="popup">
		<h2>Here i am</h2>
		<a class="close" href="#">×</a>
		<div class="content">
			Thank to pop me out of that button, but now i'm done so you can close this window.
		</div>
	</div>
</div>

InformationsquelleAutor Atchyut Nagabhairava | 2015-03-30

css html

Ohne JQuery können Sie dies tun.

CSS:

 .box {
            width: 20%;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.2);
            padding: 35px;
            border: 2px solid #fff;
            border-radius: 20px/50px;
            background-clip: padding-box;
            text-align: center;
          }
          .button {
            font-size: 1em;
            padding: 10px;
            color: #fff;
            border: 2px solid orange;
            border-radius: 20px/50px;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease-out;
          }
          .button:hover {
            background: orange;
          }
          .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            transition: opacity 500ms;
            visibility: visible;
            opacity: 1;
          }
          .overlay:target {
            visibility: hidden;
            opacity: 0;
            display:none
          }
          .popup {
            margin: 70px auto;
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            width: 30%;
            position: relative;
            transition: all 5s ease-in-out;
          }
          .popup h2 {
            margin-top: 0;
            color: #333;
            font-family: Tahoma, Arial, sans-serif;
          }
          .popup .close {
            position: absolute;
            top: 20px;
            right: 30px;
            transition: all 200ms;
            font-size: 30px;
            font-weight: bold;
            text-decoration: none;
            color: #333;
          }
          .popup .close:hover {
            color: orange;
          }
          .popup .content {
            max-height: 30%;
            overflow: auto;
          }

HTML:

    <div class="box">
        <a class="button" href="#">Let me Pop up</a>
    </div> 

    <div id="popup1" class="overlay">
    	<div class="popup" >
    		<h2>Here i am</h2>
    		<a class="close" href="#popup1">×</a>
    		<div class="content">
    			Thank to pop me out of that button, but now i'm done so you can close this window.
    		</div>
    	</div>
    </div>

Hey, Danke für Eure Hilfe... 🙂
Können Sie mir eine weitere fav-bitte, Wenn Sie bemerken, ich bin nicht immer die pop-up-hintergrund-Schatten-region auf ganz nach unten scrollen. Bitte korrigieren Sie na...
Lesen Sie diese bitte meta.stackexchange.com/questions/5234/..., und akzeptieren Sie die Antwort gegeben.

InformationsquelleAutor Ashot Khanamiryan

Gibt es nicht eine Möglichkeit, ein auto-popup/lightbox beim laden der Seite mit CSS.

Diese Arbeit zu machen müssen Sie ein wenig jquery-code oben. Unten werden Ihnen alle Funktionen, die Sie wollen könnte aus dem pop-up -

$(document).ready(function() {  

var id = '#dialog';

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect
$('#mask').fadeIn(500); 
$('#mask').fadeTo("slow",0.9);  

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(2000);     

//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();

$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

});

Und schließlich fügen Sie die jQuery-Bibliothek in die Seite

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>

InformationsquelleAutor Mr N Dynamite

Können Sie verwenden JQuery für die.
Prüfen Sie die Unten stehende code funktioniert so weit:

JS:

$(document).ready(function() {
    $(function(){
      
      $('#popup1').css("visibility", "visible"); 
       $('#popup1').css("opacity", 1); 
      
       });
  
  $( ".close" ).click(function() {
    
       $('#popup1').css("visibility", "hidden"); 
       $('#popup1').css("opacity", 0);
    });
});

CSS:

.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid orange;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: orange;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
	<a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
	<div class="popup">
		<h2>Here i am</h2>
		<a class="close" href="#">×</a>
		<div class="content">
			Thank to pop me out of that button, but now i'm done so you can close this window.
		</div>
	</div>
</div>

Thanx alot bro Sie mir das Leben gerettet.. 🙂
Können Sie mir eine weitere fav-bitte, Wenn Sie bemerken, ich bin nicht immer die pop-up-Fenster nach unten scrollen.
für die, die Sie haben zu geben, die Höhe zu überlagern, wie 1024px; weil es position:absolute;
Dank Buddyy... 🙂
Markieren Sie bitte als Antwort, wenn es Ihr Problem gelöst.

InformationsquelleAutor ketan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.