I wanted to put a modal window with this code, but the problem is that my site has a smooth scrolling script to the anchor and it refuses to work.

Please tell me how to fix? If anyone is not difficult, correct errors or omissions.

The script itself that is responsible for the smooth scrolling that crosses the work of this code:

$(document).ready(function(){$('a[href^="#"], a[href^="."]').click(function(){var t=$(this).attr("href");return 0!=$(t).length&&$("html, body").animate({scrollTop:$(t).offset().top},1500),!1})}); 
 .overlay { top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; background-color: rgba(0, 0, 0, 0.65); position: fixed; cursor: default } .overlay:target { //display: block } .popup { top: -100%; right: 0; left: 50%; font-size: 14px; z-index: 20; margin: 0; width: 85%; min-width: 320px; max-width: 600px; position: fixed; padding: 15px; border: 1px solid #383838; background: #FEFEFE; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; font: 14px/18px 'Tahoma', Arial, sans-serif; -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3); -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3); -ms-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3); box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3); -webkit-transform: translate(-50%, -500%); -ms-transform: translate(-50%, -500%); -o-transform: translate(-50%, -500%); transform: translate(-50%, -500%); -webkit-transition: -webkit-transform .6s ease-out; -moz-transition: -moz-transform .6s ease-out; -o-transition: -o-transform .6s ease-out; transition: transform .6s ease-out } #win1:target { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 20% } .close { top: -10px; right: -10px; width: 20px; height: 20px; position: absolute; padding: 0; border: 2px solid #CCC; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba(61, 61, 61, 0.8); -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; text-align: center; text-decoration: none; font: 13px/20px 'Tahoma', Arial, sans-serif; font-weight: bold; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); font-size: 12px } .close:hover { background-color: rgba(252, 20, 0, 0.8); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } 
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <div class="popup" id="win1">Здесь то, что будет в окне. Можно форму обратной связи <a class="close" title="Закрыть" href="#close"></a> </div> <a href="#win1" rel="nofollow">Открыть окно</a>

  • what exactly does not work, and how it should work, describe, it is not clear, what gives you an error, you simply did not connect the JQ library here, and when you connect it, a window is not displayed, is this the problem? describe the problem in more detail - Air
  • The library is connected. This window is made on css but the opening is blocked due to a smooth scroll script along the anchor. The site is laydiling. The script is written above - Alex
  • With this script responsible for the smooth scrolls refuses to work - jsfiddle.net/gg5xb0vL - Alex

1 answer 1

Understood himself. That's who if you suddenly need and who has a site on Leudeling here's the answer: https://jsfiddle.net/gg5xb0vL/6/

 $(document).ready(function() { $('a[href^="#"], a[href^="."]').not('.sf').click(function() { var t = $(this).attr("href"); return 0 != $(t).length && $("html, body").animate({ scrollTop: $(t).offset().top }, 1500), !1 }) }); 
 .overlay { top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; background-color: rgba(0, 0, 0, 0.65); position: fixed; cursor: default } .overlay:target { //display: block } .popup { top: -100%; right: 0; left: 50%; font-size: 14px; z-index: 20; margin: 0; width: 85%; min-width: 320px; max-width: 600px; position: fixed; padding: 15px; border: 1px solid #383838; background: #FEFEFE; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; font: 14px/18px 'Tahoma', Arial, sans-serif; -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3); -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3); -ms-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3); box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3); -webkit-transform: translate(-50%, -500%); -ms-transform: translate(-50%, -500%); -o-transform: translate(-50%, -500%); transform: translate(-50%, -500%); -webkit-transition: -webkit-transform .6s ease-out; -moz-transition: -moz-transform .6s ease-out; -o-transition: -o-transform .6s ease-out; transition: transform .6s ease-out } .popup:target { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 20% } .close { top: -10px; right: -10px; width: 20px; height: 20px; position: absolute; padding: 0; border: 2px solid #CCC; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba(61, 61, 61, 0.8); -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; text-align: center; text-decoration: none; font: 13px/20px 'Tahoma', Arial, sans-serif; font-weight: bold; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); font-size: 12px } .close:hover { background-color: rgba(252, 20, 0, 0.8); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } 
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <a href="#win1" rel="nofollow" class="sf">Открыть окно 1</a> <div class="popup" id="win1">Здесь то, что будет в окне. <a class="close sf" title="Закрыть" href="#close"></a> </div> <a href="#win2" rel="nofollow" class="sf">Открыть окно 2</a> <div class="popup" id="win2">Что будет в окне. <a class="close sf" title="Закрыть" href="#close"></a> </div>

  • @Duoxx, well, closer - why remove the link to jsfiddle? - Qwertiy ♦
  • Did not quite understand. I didn’t delete anything, but put it the opposite - Alexey
  • This was not your comment. And to you for the future this: in addition to the link to jsfiddle, insert the code directly in the form of a snippet. - Qwertiy ♦