除模态弹出窗口外，所有其他 JS 功能均正常工作。 即使在 Windows 负载下，模态也无法工作。
如果我使用脚本创建一个新页面，模式弹出功能并且正文中没有代码。模态有效，所以我认为更正位于 <body> 内的代码中标签
控制台没有显示错误。
我的代码
<html>
<head>
<title>Ready</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<script type="text/javascript">
function getPackageforCourier(val) {
$.ajax({
type: "POST",
url: "latest_rts_pkr.php",
data:'courier_name='+val,
success: function(data){
$("#latest_rts").html(data);
}
});
}
function markRTS()
{
document.getElementById('readytoship').style.display = 'none';
document.getElementById('awb').style.display = 'none';
$.ajax({
type: "POST",
url: "pickrr_rts.php",
data:'airwaybill='+$("#awb").val(),
success: function(data){
$("#readytoship").html(data);
document.getElementById('readytoship').style.display = 'block';
document.getElementById('awb').style.display = 'block';
setTimeout(function() {
$("button").removeAttr("disabled");
$("input").removeAttr("disabled");
document.getElementById('awb').value = "";
document.getElementById("awb").focus();
}, 50);
}
});
}
$(window).on('load',function(){
$("#pro_popup").click();
});
// DISABLE BUTTON ONCE CLICKED, FOR 1 SECOND
$(function() {
$("button").click(function() {
$("button").attr("disabled", "disabled");
$("input").attr("disabled", "disabled");
// document.getElementById('resendbutton').style.display = 'none';
});
});
function getSKUMapping(val)
{
var sku_id = $("#check_sku").value;
if(sku_id!='')
{
$.ajax({
type: "POST",
url: "check_sku_mapping.php",
data:'skuID='+val,
success: function(data){
if(data!=''){
$("#mapping_result").html(data);
document.getElementById('mapping_result').style.display ='block';
$("#check_sku").value="";
}
}
});
}
else
{
document.getElementById('mapping_result').style.display ='none';
}
}
</script>
</head>
<body>
<h2>Ready to Ship<h3>
<div id="readytoship" class="animated tada bounceInRight" style=
"padding:auto 1%;box-shadow:0px -1px 1px rgba(0,0,0,0.5);cursor:pointer; background-color:rgba(255,255,255,0.1); border-radius:6px; display:none;margin:2% auto;width:80%;">
</div>
<div id="rts_form">
<form id="rts" method="POST" action="">
<input class="input" type="text" maxlength="20" name="awb" placeholder="Scan Airway Bill Barcode" id="awb" autofocus autocomplete="off">
<button type="submit" id="submit" onclick="markRTS();">Mark Ready to Ship</button>
</form>
</div>
<div id="latest">
<?php
$con = mysqli_connect("localhost","admin","xxx1xxx!","admin_db");//database connection
$result = mysqli_query($con, "SELECT rts.courier, rts.status FROM `oc_shipping_pickrr` AS rts WHERE rts.status='0' GROUP BY rts.courier");
echo '
<select class="input" name="courier_name" id="courier_name" onChange="getPackageforCourier(this.value);" required="required">
<option value="">Select Courier</option>';
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['courier'].'">'.$row['courier'].'</option>';
}
echo '</select></label>';
mysqli_free_result($result);
?>
</div>
<div id="latest_rts">
</div>
<div id="mapping">
<form id="sku_mapping_check" method="" type="POST">
<input class="input-sku" type="text" name="check_sku" id="check_sku" required onkeyup="getSKUMapping(this.value);" placeholder="Scan SKU Barcode">
</form>
<p style="font-weight:800;" id="mapping_result">
</p>
</div>
</body>
</html>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="pro_popup" data-toggle="modal" data-target="#myModal" style="display:none;top:0;left:0;">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" onclick="ScrollToTop();" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-weight:600; text-align:center;">Package Details</h4>
</div>
<div class="modal-body">
<div id="new_pop_data">
</div>
</div>
<div class="modal-footer">
<button type="button" onclick="ScrollToTop();" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我已经尝试了一切，但没有任何效果。 我也删除了 php 缓存代码，也在隐身模式中尝试过。
我检查了Javascript Syntax Validator也，但它表明代码没问题。
最佳答案
您至少需要将模式和按钮代码放在 </body> 之前结束标签。
更新:
找到了，需要移动代码$("#pro_popup").click();从窗口加载事件到 jQuery dom 就绪事件:
$(window).on('load',function(){
//$("#pro_popup").click();
});
还有
$(function() {
$("#pro_popup").click();
$("button").click(function() {
$("button").attr("disabled", "disabled");
$("input").attr("disabled", "disabled");
// document.getElementById('resendbutton').style.display = 'none';
});
});
关于javascript - Bootstrap 模态弹出窗口在 PHP 页面上不起作用 |控制台没有显示错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49698349/