使用 html、CSS 自动弹出关闭按钮

Auto popup with close button using html, CSS

提问by Atchyut Nagabhairava

Hi I have code which generates a popup on button click. But can any one please modify my code so that I can insert that code in my page and get an auto popup on my page load.

嗨，我有代码可以在单击按钮时生成一个弹出窗口。但是任何人都可以修改我的代码，以便我可以在我的页面中插入该代码并在我的页面加载时自动弹出。

I wish to insert this code in success page of project which appears after completion of a form.

我希望在完成表单后出现的项目成功页面中插入此代码。

.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;
}

<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>

回答by Ashot Khanamiryan

Without JQuery you can do this.

没有 JQuery，你可以做到这一点。

 .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;
          }

    <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>

回答by Mr N Dynamite

There isn't a way to do an auto popup/lightbox on page load with CSS.

没有办法在页面加载时使用 CSS 自动弹出/灯箱。

To make this work you will need to add a little jquery to your code above. This below will give you all the features you could want from the pop up

要完成这项工作，您需要在上面的代码中添加一些 jquery。下面的内容将为您提供弹出窗口中可能需要的所有功能

$(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();
});

});

And lastly add the jQuery library in the page

最后在页面中添加 jQuery 库

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

回答by ketan

You can use JQuery for that. Check Below code working so far:

您可以为此使用 JQuery。检查以下代码到目前为止工作：

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

.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;
}

<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>