我有一个HTML模态，我想在单击一个按钮后进行切换，但是我无法使其正常工作。模式内容显示在主视图中，并且不会切换。
<a href="#myModall" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModall" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
上面的代码取自this教程，在这里它实际起作用！
P.S。由于某些值，我不想重新加载HTML以切换模式，我会丢失它们。
编辑：
<head>
<title>Add
devices</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<?php if ($show_modal) : ?>
<script>
$(document).ready(function() {
$("#myModal").modal('show');
$('#modalTable').DataTable({
searching: true,
paging: true,
info: true
});
});
</script>
<?php endif; ?>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select.device_type_id").change(function() {
var selectedType = $(this).children("option:selected").val();
window.Var1 = selectedType;
// alert("You have selected the type id - " + selectedType);
$.ajax({
url: "./createDevice.php",
method: "POST",
data: {
unit: selectedType
},
dataType: "text",
success: function(html) {
$('#confirmation').html(html);
}
});
});
});
</script>
<script>
function pageRedirect() {
if (window.Var1 == null || window.Var1 == 'Select') {
alert("Your forgot to choose device type!");
} else {
window.location.href = "add_devices_ble.php";
}
}
</script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<a href="#myModall" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModall" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</body>
似乎您的示例页面可能未加载引导程序所需的CSS和javascript文件。请记住，bootstrap css文件可以为您提供大部分帮助，但是一旦您开始添加下拉列表，导航栏和模式，您也需要使用javascript。 https://getbootstrap.com/docs/4.5/getting-started/introduction/用于加载CDN。