2016-11-15 122 views
0

我有一個長表(例如:1000行)。每行都有一個按鈕,如果按下,則通過jQuery顯示一個sweetalert對話框。 (http://t4t5.github.io/sweetalert/顯示對話框(通過alert或sweetalert)滾動到頁面頂部

問題:如果向下滾動,讓我們說到表的50%,當我單擊按鈕時,對話框顯示正確,但是,表已滾動到頁面的頂部。我非常肯定這與sweetalert顯示的css位置有關。我嘗試將它從固定改爲絕對,但它不起作用。

.sweet-overlay, .sweet-alert{ 
    position: absolute !important; 
    } 

使用javascript「alert」而不是sweetalert具有相同的效果。如果我添加「e.preventDefault();」那麼它適用於警報,但不適用於sweetalert。

任何想法?謝謝!

回答

1

原始甜蜜提醒插件不受支持,我建議你使用SweetAlert2插件,它沒有你提到的問題。

遷移很簡單,這裏的遷移指南:Migration from SweetAlert to SweetAlert2

這是你的情況下(100行)與SweetAlert2實現的例子:

swal({ 
 
    html: '<table>' + '<tr><td>row</td></tr>'.repeat(100) + '</table>' 
 
})
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>

+0

謝謝@limonte我會檢查出來。我遇到的問題不是對話框中的表格。長表在頁面上。所以,如果我向下滾動表格,當對話框出現時,它會滾動到頂部。 – WebDevGuy2

0

通過JS我看可以看到傳統版本的甜蜜提醒插件添加了一種稱爲「停止滾動」的樣式到文檔正文中。這似乎是影響頁面位置的原因。

作爲我正在處理的網站上的快速修復,評論此風格的高度和溢出(在sweetalert.css中)可以停止頁面跳轉。

顯然不是最終的解決方案,只是一個修復。

希望這會有所幫助。

+0

你很近,看到我的答案 – Andy

1

我修復了它。

存在可能影響某些用戶的CSS問題。甜警報1和2的一個模式打開時都編寫JavaScript,增加了一個類你

overflow-y: scroll; 

它可能適用於一些用戶簡單地刪除這個CSS,奇怪的是,它確實不適合我。

所以註釋掉線699甜alert.js

// addClass(document.body, swalClasses.shown); // BREAKS THEME 

更新:

你可以添加一些CSS:

body.swal2-shown { overflow-y: none !important; } 

不過,我得到一個奇怪的吧。但我正在做一些奇怪的主題。這是兩個邪惡中較少的一個。 :)