modal-dialog 相关问题

指用于向用户显示重要信息的图形对话框。这些对话框显示在所有其他内容之上，阻止应用程序流，直到收到用户输入。

Bootstrap模态对话框，show.bs.modal事件relatedTarget未定义。我怎样才能得到点击的元素？

按钮调用模态对话框：单击按钮时，将触发事件，结果事件引用 e.relatedTarget 未定义。那么，如何从处理程序中获取调用按钮呢？ e 不 ...

twitter-bootstrap events dialog modal-dialog fuelux

回答 7 投票 0

我想在弹出窗口中加载 pdf，我尝试按照 https://stackblitz.com/edit/angular-modal-pdf?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp 来实现.component.ts.这里的 pdf 加载在 po ...

angular modal-dialog

回答 1 投票 0

如何使用持久组件创建 ng-bootstrap 模态？

我正在尝试按照本教程（https://ng-bootstrap.github.io/#/components/modal - “组件作为内容”部分）实现具有角度的模态，但我希望组件显示在的...

angular typescript modal-dialog ng-bootstrap

回答 2 投票 0

如何在 Django 中单击更新按钮之前显示个人资料图片（我选择更新的图片）

我正在做一个用户可以更新个人资料信息（用户名、个人简介、网址、个人资料图片）的项目。在 user_update.html 文件中，我在 m...

django bootstrap-4 modal-dialog bootstrap-modal profile-picture

回答 1 投票 0

用户单击后退按钮时关闭灯箱对话框

用户单击后退按钮时如何关闭灯箱对话框。我知道如果 URL 哈希值发生变化是可能的，因此如果用户点击 Lightbox 项目，是否有任何方法可以更改 url 哈希值？我检查过

dialog modal-dialog lightbox simplemodal lightbox2

回答 0 投票 0

传单地图在 bootstrap 3.0 模态中未正确显示

我有一个大问题。我想在模态中打开传单地图。但地图显示不正确。瓷砖没有加载。这是脚本： http://bootply.com/98730 我有一个大问题。我想在模态中打开传单地图。但地图显示不正确。瓷砖没有加载。这是脚本： http://bootply.com/98730 <a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Open Map</a> <div id="myModal" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Map</h4> </div> <div class="modal-body"> <div class="modal-body" id="map-canvas"></div> </div> <div class="modal-footer"> <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">OK</button> </div> </div> </div> $.getScript('http://cdn.leafletjs.com/leaflet-0.7/leaflet.js',function(){ /* map settings */ var map = new L.Map('map-canvas'); var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/f1376bb0c116495e8cb9121360802fb0/997/256/{z}/{x} /{y}.png', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery © <a href="http://cloudmade.com">CloudMade</a>', maxZoom: 18 }); map.addLayer(cloudmade).setView(new L.LatLng(41.52, -71.09), 13); }); 任何帮助非常感谢我认为发生的事情是，当创建地图时，“map-canvas”元素的容器宽度/高度尚未调整为模式对话框的宽度/高度。这会导致地图大小不正确（小于）应有的大小。您可以通过调用map.invalidateSize()来解决这个问题。这将重新调整 L.Map 容器的宽度/高度范围。您可以通过挂钩到显示 Bootstrap 模式的事件来自动调用它。 $('#myModal').on('show.bs.modal', function(){ setTimeout(function() { map.invalidateSize(); }, 10); }); 将此代码插入您的 JavaScript。当显示模式时，地图将使其大小无效。超时是因为模态显示和添加到 DOM 可能需要一些动画/过渡时间。您可能应该避免使用随机选择延迟的 setTimeout。使用 'shown.bs.modal' 事件而不是 'show.bs.modal' 的更好方法： modal.on('shown.bs.modal', function(){ setTimeout(function() { map.invalidateSize(); }, 1); }) 或者使用下划线的延迟： modal.on('shown.bs.modal', function(){ _.defer(map.invalidateSize.bind(map)); }) 我使用这个解决方法： .modal { visibility: hidden; display: block; } .modal[aria-hidden='false'] { visibility: visible; display: block; } 我尝试了 map.invalidateSize() 但没有修复。终于解决了这个问题： $('#map-modal').on('shown.bs.modal', function(event) {}); 在函数中，放置与加载地图相关的代码。这对我有用，你可以在这里阅读 map.whenReady(() => { console.log('Map ready'); setTimeout(() => { map.invalidateSize(); }, 0); }); 这对我有用- $('#gmap').on('shown.bs.tab', function (e) { //call the clear map event first clearMap(); //resize the map - this is the important part for you map.invalidateSize(true); //load the map once all layers cleared loadMap(); }) 传单地图在加载时显示不正确可以用这个解决： var mapid = $(this).find('[id^=leaflet-map]').attr('id'); var map = settings.leaflet[mapid].lMap; map.invalidateSize(); 我是如何解决这个问题的：在主窗口中初始化地图。然后将地图移动到打开的模式。对于 vue.js 和 nuxt.js 开发者来说，可能是因为使用了 v-show 或者 v-if 但是你不应该使用 v-if 而应该使用 v-show。之后你唯一需要的就是像这样使用仅限客户端的标签： <client-only> <div v-show="someVariable" id="vShowOrVIfExample"> <div id="map-wrap" style="height: 100vh"> <l-map :zoom=13 :center="[55.9464418,8.1277591]"> <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer> <l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker> </l-map> </div> </div> </client-only>

twitter-bootstrap modal-dialog leaflet

回答 9 投票 0

Github如何展示模态？

我想了解这个模式在 Github 中是如何显示的：调查应用于此元素的 CSS，我没有看到任何与位置相关的属性：谁能给我一些指示...

css modal-dialog

回答 0 投票 0

在动态添加一些内容后，Bootstrap 5 Modal 在滚动时无法正常工作 - 这会导致 Modal 的高度超过之前的

Bootstrap 5 Modal 在动态添加一些内容后无法在滚动上正常工作 - 这会导致 Modal 的高度超过之前的高度。让我解释！我通过单击打开了一个 Bootstrap Modal ...

modal-dialog bootstrap-modal scrollbar bootstrap-5 bootstrap5-modal

回答 2 投票 0

如何使用引导模式在 Django 中上传个人资料图片

我正在做一个网络应用程序项目，用户可以在其中更新个人资料图片以及他们的名字、姓氏、简历、网址和用户名。我在 user_update.html 中使用 bootstrap 4 模态作为个人资料图片