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.
- 3it'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
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">×</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> |