Question

用户点击列表中的图标后，我会弹出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块来显示数据。

Answer 1

找到了解决这个问题的两种方法。

第一

将event.preventDefault();添加到popModal（）;功能

第二

将onclick = "popModal(); return false;"添加到调用函数的HTML部分。归功于模仿者。

希望这有助于其他人。

Answer 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。

弹出jQuery模式后自动向上滚动

2 个答案: