弹出 jQuery modal 后自动向上滚动答案

【问题标题】：Automatic scroll up after poping jQuery modal弹出 jQuery modal 后自动向上滚动
【发布时间】：2013-11-16 22:14:07
【问题描述】：

用户单击列表中的图标后，我会弹出 jQuery 模式。列表可能很大，因此用户必须向下滚动才能查看完整列表。当我单击该图标时，模式会在该屏幕中间弹出，然后我的浏览器会向上滚动到页面顶部。

如何防止浏览器向上滚动？

HTML

<div class="lista">
    <table class="table3">
        <tbody>
            <?php
            foreach ($predmeti as $obj){
             ?>
            <tr>
                <td><a href="#" onClick="popModal();"><img src="link"></a>
            </tr>
             <?php   
            }
            ?>
        </tbody>    
    </table>
</div>

js/jQuery

function popModal(){
    $( "#foo" ).dialog({
      open: function ( event, ui) { /* some code */ }, 
      resizable: false,
      height:230,
      width: 230,
      modal: true,
      buttons: {
        "Change": function() { /* some code */},
        "Close": function() {
          $( this ).dialog( "close" );
        }
      }

    });
}

我有 foo div 块来显示数据。

【问题讨论】：

event.preventDefault();做了这项工作。谢谢。

标签： javascript jquery html modal-dialog

【解决方案1】：

找到了 2 种解决此问题的方法。

第一个：

在 popModal() 中添加了event.preventDefault();；功能。

第二个：

在调用函数的 HTML 部分添加了onclick = "popModal(); return false;"。归功于 morodeer。

希望这对其他人有所帮助。

【讨论】：

【解决方案2】：

当您拥有<a href="#"> 时，它会跳转到# 锚点。为了在 jQuery 中防止它，您应该将 return false; 放在 onclick 事件的末尾，在您的情况下是 function popModal()。

所以这段代码应该可以工作：

function popModal(){
  $( "#foo" ).dialog({
    open: function ( event, ui) { /* some code */ }, 
    resizable: false,
    height:230,
    width: 230,
    modal: true,
    buttons: {
      "Change": function() { /* some code */},
      "Close": function() {
        $( this ).dialog( "close" );
      }
    }
  });
return false;
}

对于防止默认操作（如跳转到锚点）的普通 JS 实现，只需 google for event.preventDefault 。

【讨论】：

试过了，没用。但是我通过添加 event.preventDefault(); 来修复它最后。
也许 onclick="return popModal()" 或 onclick = "popModal(); return false;" 应该可以工作。