html code

<div class="popup"> <div class="popup__bg"></div> <div class="form"> <form class='popupform'> <input type="text" placeholder="Π’Π°ΡˆΠ΅ имя" required> <input type="text" placeholder="Π’Π°Ρˆ Π½ΠΎΠΌΠ΅Ρ€ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°" required> <textarea placeholder='ОписаниС' required></textarea> <input type="submit" calue="ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ"> </form> <div class="popup__close">x</div> </div> </div>

css code:

 .popup { position: absolute; height:100%; width:100%; top:0; left:0; display:none; } .popup__bg { background:rgba(0,0,0,0.6); position:absolute; z-index:1; height:100%; width:100%; } .form { position: relative; margin:10% auto; z-index:2; width: 30%; padding: 2%; background: rgb(94, 70, 96); background: rgba(101, 70, 96, 0.8); border:1px solid rgb(94, 70, 96); border-radius:20px; box-shadow:0 0 2px rgba(0,0,0,0.5); } .popupform { text-align: center; } .popupform input, .popupform textarea{ padding: 1% 2%; width: 85%; display: inline-block; margin-top: 1em; outline: none; border-radius: 10px; font-size: 1.25rem; } .popupform input[type='submit'] { width: 50%; transition: all 0.1s linear 0.2s; border: none; } .popupform input[type='submit']:hover { background: green; color: #ffffff; } .popup__close { width: 5%; position: absolute; top: 3%; right: 2%; border: 2px solid #000; border-radius: 20px; text-align: center; vertical-align: middle; background: rgb(137, 0, 152); background: rgba (137, 0, 152, 0.7); cursor: pointer; transition: all 0.1s linear 0.1s; color: white; font-size: 1.25rem; } .popup__close:hover { background: red; color: #000; border: 2px solid #fff; }

js code:

  $(document).ready(function() { $(".popup__bg").click(function(){ $(".popup").fadeOut(800); }); $(".popup__close").click(function(){ $(".popup").fadeOut(800); }); }); function showPopup() { $(".popup").fadeIn(800); }

In the html-code there are several buttons with a pop-up window (at the beginning and in the middle of the page), the drop-down of the window is defined by positioning.
Can you somehow tie the window to the button that calls it (so that the window appears next to the button, and not according to the positioning coordinates)?
Is it possible that when clicking on a specific button, the text of the placeholders of the form changes?

  • You can get the coordinates coordinates of the coordinates button var coordinates = $('#button').offset() and set them to the $('.popup').offset(coordinates) . - Sergey Gornostaev
  • So it will look like? $ (document) .ready (function () {var coordinates = $ ('# button'). offset (); $ (". popup__bg"). click (function () {$ (". popup"). fadeOut ( 800);}); $ (". Popup__close"). Click (function () {$ (". Popup"). FadeOut (800);});}); function showPopup () {$ ('. popup'). offset (coordinates) $ (". popup"). fadeIn (800); } - SvArt713
  • Yes you can. Before that, it is possible to perform any other manipulations with coordinates, so that the pop-up relative to the button is more beautiful. For universality, it is possible to bind it not to a specific button, but to the one that was clicked. If needed. - Sergey Gornostaev
  • This is exactly what I need (tied to the button that was clicked). This code for some reason does not work, could you look and fix it as needed? - SvArt713

1 answer 1

 var popup = $('.popup'); $('.button').click(function(e) { var coordinates = $(this).offset(); //ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ coordinates.top += $(this).height() / 2; // На высотС сСрСдины ΠΊΠ½ΠΎΠΏΠΊΠΈ coordinates.left += $(this).width() + 15; //ΠžΡ‚ΠΎΠ΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΎΡ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° 15 пиксСлСй popup.offset(coordinates); //УстанавливаСм ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΏΠΎΠΏΠ°ΠΏΡƒ popup.fadeIn(800); }); 
 .popup { display: none; width: 100px; height: 100px; background-color: gray; z-index: 999; } p { margin-bottom: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="popup"></div> <div id="demo"> <p> <button class="button">Click me!</button> </p> <p> <a href="#" class="button">Click me too!</a> </p> </div>

  • Everything works, but how can it be done so that the background of the popup is full screen (dims the entire area), and the popup is in the middle, just below the button? - SvArt713
  • Make a translucent overlay div on the page, invisible by default, and call $ ('# overlay'). Show (); before showing the popup; - Sergey Gornostaev
  • I decided differently with the background, but I still eat but, for some reason, when I press several times, the window all goes down and down, the height does not return to the way, maybe there is a solution to this? Constantly increases the indent from the top by the same number. - SvArt713