Question

除了Modal Popup之外，所有其他JS函数都能正常工作。即使在Windows加载时，Modal也无法正常工作。

如果我用脚本创建一个新页面，那么模态弹出功能和正文中没有代码。 Modal有效，因此我认为更正位于<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">&times;</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缓存代码，也在Incognito中尝试过。

我也检查了Javascript Syntax Validator，但它显示代码没问题。

Answer 1

至少需要将模态和按钮代码放在</body>结束标记之前。

<强>更新

找到它，你需要将代码$("#pro_popup").click();从加载事件的窗口移动到jQuery dom ready事件：

$(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';
    });
});

Answer 2

我找到了解决方案，因为问题出现在下面的代码中

//点击禁用按钮，第1次

$(function() {
$("button").click(function() {
    $("button").attr("disabled", "disabled");
    $("input").attr("disabled", "disabled");
   // document.getElementById('resendbutton').style.display = 'none';

});

}）;

不必要地摆弄我的触发按钮！

谢谢大家！

Bootstrap模态弹出窗口不适用于PHP页面|控制台显示无错误

2 个答案: