繁体   English   中英

关闭模态窗口后防止页面滚动回到顶部

[英]prevent page from scrolling back to top after closing modal window

知道关闭模态窗口时如何防止页面滚动回到页面顶部吗? 我需要它保持与充满文本的页面相同的位置,否则您最终会迷失原状。 我有这个工作,但由于某些奇怪的原因不再起作用。 谢谢。

页面调用一个PHP请求,该请求经过一个while循环并显示句子,单击该句子可显示其他信息。 这显示在模式窗口中。

while ($row = $result->fetch_assoc())
{ ?> 
<a  href="#" class="nojump" id="mymodal" onclick="showModal(this)"  
style="font-size:16px;"  title="<? echo  $row ['title']  ?> 
 by
 <? echo $row ['author'] ?>" ><? echo $row ['first_line'] ?> </a>


<script>
  function showModal(el) {
    jQuery("#myModalLabel").text(el.title);
    jQuery("#myModal").modal()
  }

</script>
<script>
  jQuery('a.nojump').click(function(e)
  {
    // Cancel the default action
    e.preventDefault();
  });
</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">  
         <div class="modal-header">    
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
         </div>  
         <div class="modal-body">   
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>  
         </div>  
         <div class="modal-footer">    
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
    </div>
  </div>
</div>

已更新:我更新了JSBin ,这是您想要的吗?

HTML:

 <a  href="#myModal" class="nojump" style="font-size:16px;" title="title" data-toggle="modal">click me</a>

Javascript:

jQuery('a.nojump').click(function(e) {  
      e.preventDefault();
      console.log('do something here')
    });

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM