我在我的项目中使用了 Bootstrap 的模式弹出窗口，并且想要以下内容：
1）当打开模型弹出窗口并单击背景弹出窗口时不应关闭。
在模态定义本身中包含数据属性
data-keyboard="false" data-backdrop="static"<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
// Modal HTML Markup
</div>
2）打开模型时弹出背景不应模糊。这意味着打开模型弹出背景不应产生任何影响。
将
.modal-backdropdisplay:none;.modal-backdrop {
display:none;
}
3）打开模型弹出窗口后，用户还可以在后台工作，此时弹出窗口不应关闭。
在
.modal-open .modal.modal-open .modal {
width: 300px;
margin: 0 auto;
}
旁注：您可能需要使用媒体查询根据屏幕尺寸调整模态的宽度。
免责声明：这个答案只是为了演示如何实现所有 3 个目标如果您有多个引导模式，上述更改将影响所有模式，强烈建议使用自定义选择器。
.modal-backdrop {
display: none !important;
}
.modal-open .modal {
width: 300px;
margin: 0 auto;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br>
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>backdrop="false" 将仅删除背景黑屏，但不允许您在背景元素上执行任何操作。 为了保持后台交互并使模态保持在中间位置并具有完整视图，您需要在模态生成后使用 js 代码删除“模态”类。 并且需要使用一些自定义的css样式。添加带有模态的自定义类
<div class="modal fade custom-modal" id="myModal" role="dialog">
<div class ="modal-dialog" role="document">
<div class ="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header moveable-modal-header"></div>
</div>
</div>
</div>
</div>
//cs styles//
.custom-modal{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: fit-content;
height: fit-content;
padding: 0 !important;
}
.modal-dialog{margin: 0;}
现在填充模态后需要从 myModal div 中删除“模态”类
function openModal(){
$("#myModal").modal({backdrop:false,show:true});
$("#myModal").removeClass("modal");
//this will make modal moveable//
$("#myModal .modal-dialog").draggable({
handle: ".moveable-modal-header"
});
}
如果您想在模式打开时处理输入/文本区域元素，您可以使用它。
$('#myModal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
自 6 个月以来，我们一直在努力解决在后台打开模式的问题，以下设置已为我们所有的客户解决了这个问题：请将 IE 中的缓存行为从“自动”更改为“每次页面更改时”。
如果有人需要 bootstrap 5 答案，那么我最终使用了这个，我使用指针事件和 z-index 来控制它
<!DOCTYPE html>
<html lang="en">
<head>
<title>GPS</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<style>
/* Enable background when open Bootstrap modal popup */
.modal, .modal-backdrop {
pointer-events: none; /* Allow clicks to pass through the modal */
}
.modal-dialog {
pointer-events: auto; /* Only make the dialog box interactable */
}
#map {
z-index: 1040; /* Below the modal */
}
.modal, #sidebar {
z-index: 1050; /* Above the map */
}
</style>
<script language="JavaScript">
function showModal() {
const modal = new bootstrap.Modal(document.getElementById('empInfoModal'), {
backdrop: false // Disable backdrop interference
});
modal.show();
}
function clickMe() {
alert("I work, even when the modal is open!");
}
$(document).ready(function() {
});
// -->
</script>
</head>
<body>
<div class="container-fluid mt-2">
<div class="card">
<div class="card-header">
<div class="row mt-2">
<div class="col-2 h4">
</div>
<div class="col-8 h2 text-center">
<span class="font-weight-bold"><i class="fa fa-car"> </i>header</span>
</div>
<div class="col-2 text-end">
</div>
</div>
</div>
<div class="card-body" id="mapContainer">
<!-- Map Container -->
<div class="map-container" id="map">
<div class="mb-2">TEST content</div>
<div class="mb-2"><button class="btn btn-danger" id="modalShow" onclick="showModal()">show modal</button></div>
<div class="mb-2"><button class="btn btn-success" id="clickme" onclick="clickMe()">click me</button></div>
</div>
</div>
</div>
</div>
<!-- Modal start - employee info -->
<div class="modal fade" id="empInfoModal" tabindex="-1" data-bs-backdrop="static" aria-labelledby="empInfoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="empInfoModalLabel">GPSMAP_info</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input class="d-none" type="text" id="empInfoModal-deviceId">
<!-- Tabs Navigation -->
<ul class="nav nav-tabs" id="infoTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">GPSMAP_info</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="day-tab" data-bs-toggle="tab" data-bs-target="#day" type="button" role="tab" aria-controls="day" aria-selected="false">GPSMAP_day</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="period-tab" data-bs-toggle="tab" data-bs-target="#period" type="button" role="tab" aria-controls="period" aria-selected="false">GPSMAP_period</button>
</li>
</ul>
<!-- Tabs Info Content -->
<div class="tab-content" id="infoTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>home content</p>
</div>
<!-- Tabs Day Content -->
<div class="tab-pane fade" id="day" role="tabpanel" aria-labelledby="day-tab">
<p>day content</p>
</div>
<!-- Tabs Period Content -->
<div class="tab-pane fade" id="period" role="tabpanel" aria-labelledby="period-tab">
<p>periode content</p>
</div>
</div>
</div>
</div>
</div>
</div>