Question

我正在使用Bootstrap框架来构建一个网站。

我在加载自定义CSS文件时遇到问题。在此文件中，我覆盖了一些元素，如导航栏颜色。当用户提交表单时，我对一个php文件进行ajax调用，该文件的响应应该被加载到一个模态消息上。

为了使我的自定义CSS生效，我必须在Bootstrap CSS文件之后加载它。但是，当我这样做时，我的jQuery似乎失败了，我的ajax调用我的php文件不起作用。当我的CSS文件在Bootstrap CSS文件之后加载时，我的模态消息会打开但是空白，好像我的jQuery从未经历过。

我怀疑这与加载jQuery和Bootstrap的顺序有关，或者与我正在使用的每个版本不兼容。

请指教。

我在下面添加了一个代码段。

<!DOCTYPE html>
<html>
    <head>
        <title>Activate</title> 
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel='stylesheet' href='style.css'/>


        <script src="http://code.jquery.com/jquery-latest.min.js" ></script>

        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<script type="text/javascript">
                function chk(){

                    var opus_Code=document.getElementById('opus_Code').value;
                    var session_Token=document.getElementById('session_Token').value;
                    //var session_Token=<?php echo $session_Token; ?>;
                    var dataString='opus_Code='+ opus_Code + '&session_Token=' + session_Token;

                    $.ajax({
                        type:"post",
                        url: "redeem_Opus.php",
                        data:dataString,
                        cache:false,
                        success:function(html){
                            var response = jQuery.parseJSON(html);

                            $('#msg').html(html);
                            $('#msg').html(response.response_Message);

                            if(response.response_Status == "200"){
                                window.location.href = "activation_Complete_Page.php";
                            }else{
                                $('#msg').html(response.response_Message);
                                $('#login_Redirect_Button').html("<button type='button' class='btn btn-default' data-dismiss='modal'>Okay</button>");
                            }
                        }
                    });
                    return false;
                }

                function logout_Chk(){

                    $('#msg').html("Are you sure you want to log out?");
                    $('#login_Redirect_Button').html("<button type='button' class='btn btn-default' data-dismiss='modal'>Okay</button>");
                }
            </script>
        </head>

<!--Further down in my script-->
<!-- Modal -->
              <div class='modal fade' id='myModal' role='dialog'>
                <div class='modal-dialog modal-sm'>

                  <!-- Modal content-->
                  <div class='modal-content'>
                    <div class='modal-header'>
                      <button type='button' class='close' data-dismiss='modal'>&times;</button>
                      <h4 class='modal-title'>Please note:</h4>
                    </div>
                    <div class='modal-body' id='msg'>
                      <p>Some text in the modal.</p>
                    </div>
                    <div class='modal-footer'>
                      <div id="login_Redirect_Button"></div>
                    </div>
                  </div>

                </div>
              </div>
              <!--end Modal-->

更新

我目前的解决方法是在Bootstrap css之前加载我的自定义css，然后在html页面中添加我的样式，如下所示：

<style>
  .navbar-custom {
    background-color: rgba(40,40,40,0.8);
   }
</style>

但如果我从我的css文件中执行此操作，则不会应用相同的样式，除非我的css文件在BS css文件之后加载，这会破坏我的jQuery调用。：（

更新2 根据评论者的建议，问题出在我的自定义CSS文件中。一旦我把那些坏苹果拿出来，问题就解决了。除非您知道它的作用，否则不要从网上复制/粘贴：）

Answer 1

CSS无法与您的Javascript交互，只能与您的HTML进行交互。

出于这个原因，如果您将样式应用于页面，并且似乎这会导致问题，请尝试找出CSS中的错误。你可以非常肯定JS没有改变它的行为。

<强>旁注您想知道如何记录Ajax调用：

$.ajax({
  url: "test.html"
}).done(function(result) {
  console.log(result);      <---
});

然后在浏览器中右键单击，选择inspect element，转到控制台。你可以在那里看到输出。

jQuery BootStrap加载顺序

1 个答案: