防止頁面滾動，如果彈出窗口打開

我正在使用jquery移動彈出窗口。這是在頁面內部。有一個圖像可以打開這個彈出窗口。現在，如何在彈出窗口打開的情況下防止整個頁面滾動，並在彈出窗口關閉時允許滾動？防止頁面滾動，如果彈出窗口打開

<a href="#settingsPopUp" data-rel="popup" data-position-to="window" data-inline="true" data-icon="gear"><img src="settings1.jpg" alt="Settings"></a> 

    <br> 
    <div data-role="popup" id="settingsPopUp" data-theme="a" class="ui-corner-all"> 
     <div style="padding:10px 20px;"> 
      <h3>Location Details</h3>    
     </div>   
    </div>

來源

2013-03-11 Pramod Setlur

當模式框打開時，將overflow-y: hidden;指定給您不想滾動的元素怎麼辦？（通常這將是<body>）

來源

2013-03-11 11:39:44 Terry

有兩種方式：

Either "overflow:hidden" the body
Or give a "position:fixed" to the popup so this will scroll in the viewport.

來源

2013-03-11 11:43:22 Jai

該款式使得彈出窗口在右下角開放，使其看起來很醜。實際上有一個下拉菜單（我沒有粘貼代碼），它現在沒有被填充。 – 2013-03-12 07:10:15

您可以使用事件彈出窗口小部件

$("#settingsPopUp").popup({ 
    afteropen: function(event, ui) { 
    $('body').css({ 
     overflow:'hidden' 
    }); 
    }, 
    afterclose: function(event, ui) { 
    $('body').css({ 
     overflow:'auto' 
    }); 
    } 
});

我認爲這是一個動態的解決方案，它將需要ca你的問題重演。

來源

2013-03-11 12:08:15 misoukrane

它不工作。 :( – 2013-03-12 05:02:57

我不能評論以前的答案，但有一個小錯誤。下面的代碼段爲我做的伎倆：

$("#mypopup").popup({ 
    afteropen: function(e) { 
    $('body').css('overflow','hidden'); 
    }, 
    afterclose: function(e) { 
    $('body').css('overflow','auto'); 
    } 
});

來源

2013-09-17 18:04:54 Lefois

對於我這個方法不奏效，它適用於瀏覽器，但不是在電話間隙應用。所以我解決這個問題：

$('#Popup-id').on({ 
    popupbeforeposition: function(){ 
     $('body').on('touchmove', false); 
    }, 
    popupafterclose: function(){ 
     $('body').off('touchmove'); 
    } 
});

希望它有幫助！

來源

2013-11-04 12:23:11

它適用於我！謝謝。我使用'popupafteropen'和'popupafterclose'events。 – oriolparra 2014-10-02 14:41:26

我混了Lefois的解決方案和西莫娜阿德里安尼的解決方案。它適用於瀏覽器和手機WebView（PhoneGap + jquerymobile）。

$(document).on('popupafteropen', '[data-role="popup"]', function(event, ui) { 
    $('body').css('overflow', 'hidden').on('touchmove', function(e) { 
     e.preventDefault(); 
    }); 
}).on('popupafterclose', '[data-role="popup"]', function(event, ui) { 
    $('body').css('overflow', 'auto').off('touchmove'); 
});

來源

2014-10-02 14:49:28 oriolparra

這是一個完美的答案，應該被接受。我使用相同的，這適用於所有瀏覽器在桌面和移動設備 – 2015-07-02 06:24:03

如果您仍然希望能夠在模式對話框中滾動，這不起作用。 – Roel 2016-07-14 09:25:39

防止頁面滾動，如果彈出窗口打開

回答

相關問題