Как сделать всплывающее окно?

Question

Я просто интересно, как что-то вроде this делается Я искал в Google, но я нашел только информацию о рекламных всплывающих окон

Заранее спасибо

Answer 1

Там вы идете,

<h1>Popup without JavaScript</h1> 
    <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"> 
       Thanks for pop me out of that button, but now i'm done so you can close this window. 
      </div> 
     </div> 
    </div> 


**CSS** 


    body { 
     font-family: Arial, sans-serif; 
     background: url(4.jpg); 
     background-size: cover; 
    } 

    h1 { 
     text-align: center; 
     font-family: Tahoma, Arial, sans-serif; 
     color: orange; 
     margin: 100px 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; 
    } 

Answer 2

Try ниже фрагмент кода:

html, body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container{ 
 
    width:100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    position: absolute; 
 
    background: rgba(220,220,220, .5); 
 
} 
 

 
.modal{ 
 
    position: relative; 
 
    top: 40%; 
 
    margin: 0 auto; 
 
    height: 100px; 
 
    width: 150px; 
 
    background: white; 
 
    border: 1px solid #aaa; 
 
} 
 
p{ 
 
    margin: 0; 
 
}

<div class='container'> 
 
    <div class='modal'>Modal window</div> 
 
</div> 
 
<p> other content</p>

Попробуйте использовать абсолютный позиционированный контейнер div и дочерний div с фактическим содержимым. Я добавил абзац с содержанием Другое содержание, чтобы проиллюстрировать эффект