个人中心
gpt4 book ai didi

javascript - Bootstrap 模态弹出窗口在 PHP 页面上不起作用 |控制台没有显示错误

转载 作者：行者123 更新时间：2023-12-03 02:08:15 24 4
gpt4 key购买 nike

除模态弹出窗口外，所有其他 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">&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 缓存代码，也在隐身模式中尝试过。

我检查了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/

24 4 0
文章推荐： javascript - 自动化提交表单
文章推荐： javascript - 在 Redux (React) 中调用存储调度后， View 不想重新渲染
文章推荐： javascript - 如何管理多个监听器？
文章推荐： javascript - 尝试用 javascript 创建一个简单的游戏
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com