Question

我正在尝试在HTML网站上实现弹出式联系表单，并且我遇到了js冲突。我一直坚持如何使网站上的所有内容都能正常工作，因为删除一些js调用会导致某些功能停止工作。我确信这个专家社区，我的错误可能很明显而且很简单;尽管如此，我真的可以用一些帮助搞清楚。我在下面提供了我的代码。

提前致谢！

<!DOCTYPE html>
<html lang="en"><!--<![endif]-->
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- Basic -->
    <title>iMAR Affiliate</title>
    <meta content="DSA79" name="author" />
    <meta content="responsive, html5 template, one page, landing, startup, business, company, corporate, creative" name="keywords" />
    <meta content="iMAR Affiliate" name="description" /><!-- Mobile Specific Metas -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" /><!-- Libs CSS -->
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/flexslider.css" rel="stylesheet" />
    <link href="css/owl.carousel.css" rel="stylesheet" /><!-- On Scroll Animations -->
    <link href="css/animate.css" rel="stylesheet" /><!-- Template CSS -->
    <link href="css/style.css" rel="stylesheet" /><!-- Responsive CSS -->
    <link href="css/responsive.css" rel="stylesheet" /><!-- Image Slider -->
    <link href="js-image-slider.css" rel="stylesheet" type="text/css" /><!-- Google Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Lato:400,900italic,900,700italic,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css" />

<link type="text/css" rel="stylesheet" href="html5ModalContact.css">
<script type="text/javascript" src="jquery.html5ModalContact.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script language="javascript">

$(document).ready(function(){          

        $().html5ModalContact({
                // Popup Config
                method: "post",
                action: "process_form.php",
                shadow: "#FFFFFF",
                opacity: 70,
                advanced_close: false,
                // Fields Enabled
                firstn_on: true,
                lastn_on: false,
                email_on: true,
                subject_on: true,
                phone_on: false,
                // Field Labels
                firstn_label: 'Your First Name',
                lastn_label: 'Your Last Name',
                email_label: 'Your Email Address',
                subject_label:  'Message Subject',
                phone_label: 'Your Phone Number',
                message_label: 'Message',
                submit_label: 'Submit',
                close_label: 'Close',
                // Other
                subject_values: 'General,Technical,Feedback,Comments,Help and Support'
        });

});

</script>
</head>
<body><!-- HEADER
        ============================================= -->
<header id="header">
<div class="navbar navbar-fixed-top">
<div class="container"><!-- Logo & Responsive Menu -->
<div class="navbar-header"><button class="navbar-toggle" data-target="#navigation-menu" data-toggle="collapse" id="nav-toggle" type="button"><span class="sr-only">Toggle navigation</span></button><a class="navbar-brand" href="#top-page-banner"><img alt="logo" role="banner" src="img/iMAR2014Logo.png" /></a></div>
<!-- /.navbar-header --><!-- Navigation -->

<nav class="collapse navbar-collapse" id="navigation-menu" role="navigation">
<ul class="nav navbar-nav navbar-right">
    <li><a class="selected-nav" href="#intro" id="GoToHome">Home</a></li>
    <li><a href="#about-1" id="GoToAbout">About</a></li>
    <li><a href="" id="">Brochure</a></li>
    <li><a href="#features" id="GoToFeatures">Benefits</a></li>
    <li><a href="#faq" id="GoToFaq">FAQ</a></li>
    <li><a href="#clients" id="GoToClients">Clients</a></li>
    <li><a href="http://50.87.154.1/~imarf/contact.html" id="GoToHome">Contact Us</a></li>
</ul>
</nav>
<!-- /.navbar-collapse --></div>
<!-- /.container --></div>
<!-- /.navbar --></header>
<!-- END HEADER --><!-- CONTENT WRAPPER
        ============================================= -->

<div id="content-wrapper"><!-- ABOUT-1
            ============================================= -->

<footer id="footer">
<div class="container">
<div class="row"><!-- Footer Navigation -->
<div class="col-sm-6 col-md-4" id="footer_nav">
<ul class="footer-nav clearfix">
    <li><a href="http://50.87.154.1/~imarf/contact.html">Contact</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Privacy</a></li>
    <li><a href="#">Terms</a></li>
</ul>

<div id="footer_copy">
<p>&copy; iMAR Entertainment Inc. 2007-2014</p>
</div>
</div>
<!-- End Footer Navigation --><

<div class="col-md-4">
<div class="col-sm-12" id="newsletter_form">
<div class="clearfix">
<form action="newsletter.php" class="subscribe-form pull-right" id="subscribe-form" method="post"><input class="subscribe-input" name="email" placeholder="Enter your e-mail address..." type="email" /><button class="subscribe-submit" type="submit">Subscribe</button></form>
</div>

<p class="pull-right" id="newsletter-paragraph">Join our newsletter subscription, be always informed</p>
</div>
</div>
<!-- End Newsletter Form --></div>
<!-- End row --></div>
<!-- End container --></footer>
<!-- END FOOTER --></div>
<!-- END CONTENT WRAPPER --><!-- EXTERNAL SCRIPTS
        ============================================= --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script src="js/bootstrap.min.js" type="text/javascript"></script><script src="js/retina.js" type="text/javascript"></script><script src="js/modernizr.custom.js" type="text/javascript"></script><script src="js/jquery.easing.js" type="text/javascript"></script><script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script><script src="js/jquery.validate.min.js" type="text/javascript"></script><script defer src="js/jquery.flexslider.js" type="text/javascript"></script><script src="js/jquery.accordion.source.js" type="text/javascript"></script><script src="js/owl.carousel.js" type="text/javascript"></script><script src="js/waypoints.min.js" type="text/javascript"></script><script src="js/animations.js" type="text/javascript"></script><script src="js/custom.js" type="text/javascript"></script><!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]--><!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information. --><!--
        <script>
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-XXXXX-X']);
            _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>
        --></body>
</html>

Answer 1

您可能在加载jQuery之前加载了一个jQuery扩展。

将脚本代码的顺序更改为

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.html5ModalContact.js"></script>

然后Can't find variable jQuery & TypeError: undefined is not a function (evaluating '$().html5ModalContact')错误应该消失。

与弹出联系表单冲突的JS

1 个答案: