Hello, such a question, I need to make sure that when I press the button, it does not go to a separate page, but opens over the old one and darkens it.

  • 3
    it's called "open in a modal window" - HamSter
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

An example implementation on bootstrap 3 . See the documentation for details.

click execute to see how the example works.

<!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠΌ jquery ΠΈ bootstrap 3--> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ</button> <!-- модальноС ΠΎΠΊΠ½ΠΎ --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">НазваниС ΠΌΠΎΠ΄Π°Π»ΠΈ</h4> </div> <div class="modal-body"> ...ΠΊΠ°ΠΊΠΎΠΉ Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΌΠΎΠ΄Π°Π»ΠΈ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ</button> <button type="button" class="btn btn-primary">Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния</button> </div> </div> </div> </div>