我有一个已经存在的网站，我想放置一个弹出窗口，让用户输入他们的名字和电子邮件，如果他们想要联系。如果您不想联系，可以选择关闭弹出窗口。
它适用于所有其他地方，但当我把它放在我的远程服务器上时，它与页面冲突。以下是代码。
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="target" content="Primary School">
<meta name="Classification" content="Nursery School">
<meta name="Description" content="academy prides itself as home to up to date modern facilities and a concise learning system that has been created to maximise the learning experience for your ward.">
<meta name="Keywords" content="Primary School In, Primary School, Nursery School In , Nursery School In , Primary School In , Nursery School In ">
<title> - Primary School, Nursery School, Primary School</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="layout.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script type="text/javascript" src="verticalscroller.js"></script>
<link href="css/js-image-slider.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/slider_main.css">
<script src="bootstrap/jhoverstatemob.js"></script>
<script src="bootstrap/facslider.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="bootstrap/searchmarch.js"></script>
<script src="bootstrap/auto_cycle.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<script type="text/javascript" src="flexy-menu.js"></script>
<script type="text/javascript">$(document).ready(function(){$(".flexy-menu").flexymenu({speed: 400,type: "vertical", indicator: true});});</script>
<link href="flexy-menu.css" rel="stylesheet">
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<link href="modal.css.css" rel="stylesheet">
<form action="sendresults1.php" method="post" id="form_pp" >
<div id="Modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-header" style="margin-top:120px;">
<div class="modal-body" >
<div class="form-group">
<input class="form-control" placeholder= "YOUR FULL NAME" name="name" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder= "YOUR EMAIL ADDRESS" name="email" type="Phone number"a>
</div>
<button type="submit" class="btn btn-default " style="color:#c13b01" id="btn_send" >SEND</button>
<button type="button" class="btn btn-default" style="color:#c13b01" id="btn_cancel" data-dismiss="modal" >CANCEL</button>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(window).load(function(){
$('#Modal').modal('show');
});
</script>
<script>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="jquery.bxslider.css" type="text/css" />
<script src="/js/jquery.min.js"></script>
<script src="jquery.bxslider.js"></script>
<script src="rainbow.min.js"></script>
<script src="scripts.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36499930-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body style="background-color:#EEE;">
<div id="general_container">
<div id="header">
</div>
<div id="menu2">
<?php include("menu.php") ?>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>
<div id="container">
<div id="banner">
<ul class="bxslider">
<li><img style="width:100%" src="images/12106739_1690926401119209_2191482622687128165_n.jpg" /></li>
<li><img style="width:100%" src="images/12088542_1690925387785977_5181459114852166975_n.jpg" /></li>
<li><img style="width:100%" src="images/12115497_1690998707778645_8753366621948913051_n.jpg" /></li>
</ul>
</div>
<div class="banner_caption"><p>Welcome to <br>SANG BLEU ACADEMY</p></div>
<div id="text_area">
<div class="text_area_right">
<div class="text_area_about">
<div class="about_content">
<div class="about_content_img"></div>
<p style="margin-top:-4px;">
Sang Bleu academy prides itself as home to up to date modern facilities and a concise learning system that has been created to maximise the learning experience for your ward. It will be a privilege to me and my team of dedicated staff to guide your ward in their journey of learning and development.</p>
<a href="about_us.php">Read More</a>
</div>
<div class="about_login">
<img src="images/admission.jpg" />
<a href="admission.php" style="text-decoration:none;"><h1 style="font-size:18px; background-color:#FF670F; color:#FFF; font-weight:normal; padding-left:15px;">ADMISSION FORMS</h1></a>
</div>
</div>
<div class="gallery_content">
<div class="gallery_content_div">
<h1>SCHOOL GATEWAY</h1>
<img src="images/line.jpg" style="margin-top:-35px;"/>
<a href="#"><img src="images/payment.fw.png" style="margin-top:-15px;"/></a>
</div>
<div class="gallery_content_div">
<h1>HEALTHY & STAYING SAFE</h1>
<img src="images/line.jpg" style="margin-top:-35px;"/>
<P>Your child's safety and well being are our first priority. </P>
</div>
<div class="gallery_content_div" style="margin-right:0px;">
<h1>POSITIVE CONTRIBUTION</h1>
<img src="images/line.jpg" style="margin-top:-35px;"/>
<p>We focus on fun and creativity which gets children thinking for themselves.</p>
</div>
</div>
</div>
<div class="text_area_left">
<?php include("login.php") ?>
</div>
</div>
</div>
</div>
<?php include("footer.php") ?>
</body>
</html>
答案 0 :(得分：1)
您在页面中使用了两次Jquery / Css文件，请确保使用正确的序列和所需的js / css。
在上面的代码中，您使用的是额外的文件，请删除
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/jquery.min.js"></script>
并正确检查所有必需的js / css。