Please tell me how to make a new block appear on top of the site when clicking on a link, as well as to darken the site itself at this time? If possible, a complete example.

  • and what did you try to do yourself and what was your difficulty? - Alex
  • this is called a modal window, it’s better to specify which css framework you are using to add an example on it - MrFylypenko
  • one
    css example - jsfiddle.net/soledar10/heb785oy - soledar10

2 answers 2

Something like http://jsfiddle.net/alpha9000/EEgu7/ Try using jQuery

 > $("#block").fadeIn() > > ПоявлСниС Π±Π»ΠΎΠΊΠ° Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠΈ 400 мс > > $("#block").fadeIn(500) > > ПоявлСниС Π±Π»ΠΎΠΊΠ° Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠΈ 500 мс > > $("#block").fadeIn("slow") > > ПоявлСниС Π±Π»ΠΎΠΊΠ° Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠΈ 600 мс
  • you need a block on top of the site, and not in the site itself - vladislav_zp
  • @vladislav_zp, so just create a block that will be on the front. .. z-index: 9999; - goodalien

 $('.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> = "stylesheet" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u" crossorigin = "anonymous" <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>

somehow it can be implemented

  • exactly what is needed. Only here is the problem, here the bootstrap is connected, and I am writing on the recorder, there will be conflicts between the styles - vladislav_zp
  • I just put on the quick drawings, bootstrap here only here "btn"> looop </ button> </ div> </ div> </ div> - Lieutenant Jim Dangle
  • you essentially need to customize the box, and with the rest everything is ok - Lieutenant Jim Dangle