[英]Why is windows resize not working with a modal?
我在模態中有一個滑塊。 但是,在模式顯示中,滑塊不會顯示在屏幕上。 當我手動調整窗口大小時,它將出現。
我已經嘗試過對此問題進行一些研究,並且有人指出,問題是因為模態一開始是隱藏的,並且尺寸計算存在問題。
打開模態后,我試圖對屏幕進行手動調整大小,但無法正常工作。
<script type="text/javascript">
$(document).on('show.bs.modal', function (e) {
if (typeof(Event) === 'function') {
// modern browsers
window.dispatchEvent(new Event('resize'));
} else {
// for IE and other old browsers
// causes deprecation warning on modern browsers
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
}
});
</script>
沒有錯誤消息,只是視覺故障。
編輯:這是我的模態代碼
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1"
role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">Title</h2>
<p class="item-intro text-muted">Subtitle</p>
<img class="img-fluid d-block mx-auto" src="img/portfolio/01-full.jpg" alt="">
<p style="text-align: left;">Description 1</p>
<p style="text-align: left;">Description 2</p>
<!--Script for Carasusel-->
<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
<div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
data-link="https://photos.app.goo.gl/CSV7NDstShTUwUZq5"
data-title="Mr. Monstro"
data-description="Mr. Monstro is a great traveler. He visited Madeira, Poland, but also Georgia, Italy ...">
<img data-src="https://lh3.googleusercontent.com/XlH6wo2PzrAEqmplYrZwV0fI-2TafTT6BRwZhKDfZSHd_zT7HIdPyPWd3Xuqhn1QQADuTJ32QFmcgYiTOEU0sC4Bvf-VyTIiq-DxxEaxIeWDYyUK_VjaW8-zrMGBvekDZT77lpduYQ=w1920-h1080" src="" alt="" />
<img data-src="https://lh3.googleusercontent.com/HISe-DV_b4gjLvSEGzrJlsqBU2rSE8uQpSqHHKTPihg_Ax9VtfCrOrvdXF01raBeBleAWQKI7Hfb4_w9vZeJKFymQfNTlubwXxTBTbqGTPwjg7S0CBtQsQJqsspvIhD9c-pniSZrEw=w1920-h1080" src="" alt="" />
<img data-src="https://lh3.googleusercontent.com/05lhR1IAQY_B9rdQ_GvHDNLe1lJsSPyyuDeIMkt--gDDAnO2_EATwif7-sfNd2K_48RvyqKmN-u2svKZ06yfh8bnrbQ5kBUrIHfZvWheTzDGhIeFd1roPor-F_BycJmVKbQO6a9EaA=w1920-h1080" src="" alt="" />
<img data-src="https://lh3.googleusercontent.com/VvK__Vx8kpPTP57WZPLblacZbTE0NqWeIGTyHSQ8Rq9pvOpWQG_CQE_tOc6jHPtj02XIBYa0Zo9fWbXXQyNYs9hDGGj34QibKFJky4W9nYBpSb57OwxiQoDyo25vzIXMTN2SNxuzqg=w1920-h1080" src="" alt="" />
</div>
<ul class="list-inline">
<li>Date: July 13 - August 11</li>
<li>Category: Events</li>
<li>Partners: THD</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).on('show.bs.modal', function (e) {
if (typeof(Event) === 'function') {
// modern browsers
window.dispatchEvent(new Event('resize'));
} else {
// for IE and other old browsers
// causes deprecation warning on modern browsers
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
}
console.log('works');
});
如果您需要手動裝飾小部件,則可以使用小型API。
將類名pa-*(例如,設置為pa-custom-gallery-player)更改為另一個名稱以禁用自動裝飾器。 設置元素ID(在這種情況下,設置為widget1)。
使用以下JavaScript代碼裝飾小部件(適用於Gallery Player):
var player = new GalleryPlayerWidget();
player.decorate(document.getElementById('widget1'));
加載“公開相冊”的Embed UI腳本后,可以使用以下對象構造函數:CarouselWidget,GalleryPlayerWidget。
這是一個小例子: https : //www.publicalbum.org/examples/decorate-widget-onclick.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.