2016-05-17 29 views
-2

我有一个已经存在的网站,我想放置一个弹出窗口,让用户输入他们的姓名和电子邮件,如果他们想联系。如果您不想联系,可以选择关闭弹出窗口。javascript popup没有正确加载html表格

它适用于所有其他地方,但是当我把它放在我的远程服务器上时,它与页面发生冲突。以下是代码。

<!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">&times;</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 \t = 500; 
 
var closetimer \t = 0; 
 
var ddmenuitem \t = 0; 
 

 
// open hidden layer 
 
function mopen(id) 
 
{ \t 
 
\t // cancel close timer 
 
\t mcancelclosetime(); 
 

 
\t // close old layer 
 
\t if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 
 

 
\t // get new layer and show it 
 
\t ddmenuitem = document.getElementById(id); 
 
\t ddmenuitem.style.visibility = 'visible'; 
 

 
} 
 
// close showed layer 
 
function mclose() 
 
{ 
 
\t if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 
 
} 
 

 
// go close timer 
 
function mclosetime() 
 
{ 
 
\t closetimer = window.setTimeout(mclose, timeout); 
 
} 
 

 
// cancel close timer 
 
function mcancelclosetime() 
 
{ 
 
\t if(closetimer) 
 
\t { 
 
\t \t window.clearTimeout(closetimer); 
 
\t \t closetimer = null; 
 
\t } 
 
} 
 

 
// 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"> 
 
\t \t 
 
\t \t 
 
     
 
</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"> 
 
\t \t <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> 
 
\t \t <div id="text_area"> 
 
     \t \t 
 
       <div class="text_area_right"> 
 
       \t \t <div class="text_area_about"> 
 
         \t \t <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"> 
 
         \t \t <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"> 
 
       \t \t <?php include("login.php") ?> 
 
       </div> 
 
     </div> 
 
     
 
</div> 
 
</div> 
 
<?php include("footer.php") ?> 
 
</body> 
 
</html>

+0

您能否更具体地了解您的问题?你是什​​么意思它冲突? –

+0

@ matthew-herbst在页面加载时应该出现的弹出窗口对齐菜单栏的左侧。 – pimpace

回答

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。

+1

谢谢。我明白了。其中一个CSS实际上是由一个同事修改的。 – pimpace