javascript弹出窗口没有正确加载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	= 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>

您在页面中使用了两次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。

最新更新