我正在使用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'>×</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文件中。一旦我把那些坏苹果拿出来,问题就解决了。除非您知道它的作用,否则不要从网上复制/粘贴:)
答案 0 :(得分:1)
CSS无法与您的Javascript交互,只能与您的HTML进行交互。
出于这个原因,如果您将样式应用于页面,并且似乎这会导致问题,请尝试找出CSS中的错误。你可以非常肯定JS没有改变它的行为。
<强>旁注强> 您想知道如何记录Ajax调用:
$.ajax({
url: "test.html"
}).done(function(result) {
console.log(result); <---
});
然后在浏览器中右键单击,选择inspect element
,转到控制台。你可以在那里看到输出。