При нажатии появляется блок

442

26 ноября 2016, 18:49

подскажите пожалуйста, как сделать, чтобы при нажатии на ссылку появлялся новый блок поверх сайта, а так же чтобы сам сайт в это время затемнялся? если можно, полный пример.

Answer 1

Что-то вроде http://jsfiddle.net/alpha9000/EEgu7/ Попробуйте средствами jQuery

>     $("#block").fadeIn()
>     
>     Появление блока в течении 400 мс
>     
>     $("#block").fadeIn(500)
>     
>     Появление блока в течении 500 мс
>     
>     $("#block").fadeIn("slow")
>     
>     Появление блока в течении 600 мс

Answer 2

$('.btn').on('click', function(){ 
    if($('.register-w').hasClass('on')){ 
      $('.register-w').removeClass('on'); 
    } else { 
      $('.register-w').addClass('on'); 
    } 
}); 
 
$('.bg').click(function(){ 
    $('.register-w').removeClass('on'); 
});

.register-w.on .box { 
  margin: -50px auto 0; 
  width: 500px; 
  height: 500px; 
  position: absolute; 
  background: #000; 
  top: 50%; 
  left: 0; 
  right: 0; 
  z-index: 999; 
} 
.register-w.on .bg { 
  position: fixed; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  background: rgba(0, 0, 0, 0.5); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
  <div class="row"> 
    <div class="col-md-12"> 
      <p>jskdlfjsldfjslkdfjsdlfkjsdlfk</p> 
      <button class="btn">looop</button> 
    </div> 
  </div> 
</div> 
 
<div class="register-w"> 
  <div class="box"></div> 
  <div class="bg"></div> 
</div>

как-то так можно реализовать