twitter bootstrap - modal window isn't working -
i working on bootstrap website , want modal window popup when users click on login/register link.. think there wrong code because link isn't responding. here code below.
each time click on of link modal appears in funny way, tried include different file link isn't responding too
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>heart2heart</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="" /> <meta name="author" content="" /> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="assets/css/fancybox/jquery.fancybox.css"> <link href="assets/css/bootstrap.css" rel="stylesheet" /> <link href="assets/css/bootstrap-theme.css" rel="stylesheet" /> <link rel="stylesheet" href="assets/css/slippry.css"> <link href="assets/css/style.css" rel="stylesheet" /> <link rel="stylesheet" href="assets/color/default.css"> <link href="assets/css/bootstrap.techie.css" rel="stylesheet"> <script src="assets/js/modernizr.custom.js"></script></head> <body> <header> <div id="navigation" class="navbar navbar-inverse navbar-fixed-top default" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">heart2heart</a> </div> <div class="navigation"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><nav> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">about</a></li> <li><a href="#works">how works</a></li> <li><a href="#testimonial">testimonial/referees</a></li> <li><a href="#privacy">privacy policy</a></li> <li><a href="#contact">contact</a></li> <li><a href ="#mymodal" data-toggle="modal" data-target="">login/register</a></li> </ul></nav> <div id="mymodal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">confirmation</h4> </div> <div class="modal-body"> <p>do want close dialog?</p> <p class="text-warning"> <small>if don't save, changes lost.</small> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">save changes</button> </div> </div> </div> </div> </div><!-- /.navbar-collapse --> </div> </div> </div> </header> <!-- section intro --> <section id="intro"> <ul id="slippry-slider"> <li> <a href="#slide1"><img src="assets/img/slide/1.jpg" alt="welcome groovin!"></a> </li> <li> <a href="#slide2"><img src="assets/img/slide/2.jpg" alt="this awesome bootstrap template"></a> </li> <li> <a href="#slide3"><img src="assets/img/slide/3.jpg" alt="check out, going <span class='red'>♥</span> :)"></a> </li> </ul> </section> <!-- end intro --> <!-- section --> <section id="about" class="section"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="heading"> <h3><span>about us</span></h3> </div> </div> </div> <section id="feature"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="wrap-item text-center"> <div class="item-img"> <img src="assets/img/ser01.png"> </div> <h3 class="pad-bt15">financial freedom</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="wrap-item text-center"> <div class="item-img"> <img src="assets/img/ser02.png"> </div> <h3 class="pad-bt15">online support</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="wrap-item text-center"> <div class="item-img"> <img src="assets/img/ser03.png"> </div> <h3 class="pad-bt15">40% on roi</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="wrap-item text-center"> <div class="item-img"> <img src="assets/img/ser04.png"> </div> <h3 class="pad-bt15">secured platform</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> </div> </section> <div class="sub-heading"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam ultricies libero id augue vulputate mattis. nunc id interdum libero, ut pulvinar metus. etiam commodo elit elit, sed pharetra turpis porta at. fusce quis consequat ipsum. aenean hendrerit pretium velit, vel aliquam arcu sollicitudin eu. nullam sit amet lorem et ligula condimentum convallis id eget nisi. duis lacinia porttitor commodo. vivamus nec sem vel purus rhoncus sodales. mauris ante quam, efficitur et sapien vel, eleifend ultricies massa. praesent pretium vulputate nisi. ut ac imperdiet lacus. donec non sollicitudin ligula. donec tortor nisi, tincidunt lobortis egestas sed, molestie eu elit. etiam feugiat volutpat libero @ dictum. nunc aliquam tempor ultrices. </p> </div> </div> </section> <!-- end section --> <!-- section works --> <section id="works" class="section gray"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="heading"> <h3><span>how works</span></h3> </div> <div class="sub-heading"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque ex diam, vestibulum nec mauris eget, interdum venenatis mauris. sed vel dictum lectus. suspendisse volutpat blandit viverra. praesent turpis nibh, iaculis et tellus in, dignissim tempus enim. suspendisse nec massa orci. pellentesque eu leo sagittis, bibendum ligula at, dignissim leo. donec facilisis eget metus vel maximus. sed sit amet interdum augue. donec finibus, arcu non tempus sagittis, lectus dui auctor lectus, placerat egestas eros tellus venenatis lacus. nulla fringilla turpis eget erat imperdiet, sed dictum dolor imperdiet. etiam sollicitudin lectus non feugiat vehicula. </p> </div> </div> </div> <!---<div class="row"> <div class="col-md-12"> <ul class="grid effect" id="grid"> <li> <a class="fancybox" data-fancybox-group="gallery" title="portfolio name" href="assets/img/portfolio/1.jpg"> <img src="assets/img/portfolio/1.jpg" alt="" /> </a> </li> <li><a href="assets/img/portfolio/2.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/2.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/3.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/3.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/4.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/4.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/5.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/5.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/6.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/6.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/7.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/7.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/8.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/8.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/9.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/9.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/10.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/10.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/11.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/11.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/12.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/12.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/13.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/13.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/14.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/14.jpg" alt="" /></a></li> </ul> </div> </div> --> </div> </section> <section id="testimonial"> <div class="container"> <div class="row"> <div class="col-md-6 "> <div class="heading"> <h3><span>testimonials</span></h3> </div> <div class="sub-heading"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque ex diam, vestibulum nec mauris eget, interdum venenatis mauris. sed vel dictum lectus. suspendisse volutpat blandit viverra. praesent turpis nibh, iaculis et tellus in, dignissim tempus enim. suspendisse nec massa orci. pellentesque eu leo sagittis, bibendum ligula at, dignissim leo. donec facilisis eget metus vel maximus. sed sit amet interdum augue. donec finibus, arcu non tempus sagittis, lectus dui auctor lectus, placerat egestas eros tellus venenatis lacus. nulla fringilla turpis eget erat imperdiet, sed dictum dolor imperdiet. etiam sollicitudin lectus non feugiat vehicula. </p> </div> </div> <div class="col-md-6 "> <div class="heading"> <h3><span>referal links</span></h3> </div> <div class="sub-heading"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque ex diam, vestibulum nec mauris eget, interdum venenatis mauris. sed vel dictum lectus. suspendisse volutpat blandit viverra. praesent turpis nibh, iaculis et tellus in, dignissim tempus enim. suspendisse nec massa orci. pellentesque eu leo sagittis, bibendum ligula at, dignissim leo. donec facilisis eget metus vel maximus. sed sit amet interdum augue. donec finibus, arcu non tempus sagittis, lectus dui auctor lectus, placerat egestas eros tellus venenatis lacus. nulla fringilla turpis eget erat imperdiet, sed dictum dolor imperdiet. etiam sollicitudin lectus non feugiat vehicula. </p> </div> </div> </div> <!---<div class="row"> <div class="col-md-12"> <ul class="grid effect" id="grid"> <li> <a class="fancybox" data-fancybox-group="gallery" title="portfolio name" href="assets/img/portfolio/1.jpg"> <img src="assets/img/portfolio/1.jpg" alt="" /> </a> </li> <li><a href="assets/img/portfolio/2.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/2.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/3.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/3.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/4.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/4.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/5.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/5.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/6.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/6.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/7.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/7.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/8.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/8.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/9.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/9.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/10.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/10.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/11.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/11.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/12.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/12.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/13.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/13.jpg" alt="" /></a></li> <li><a href="assets/img/portfolio/14.jpg" class="fancybox" data-fancybox-group="gallery" title="portfolio name"><img src="assets/img/portfolio/14.jpg" alt="" /></a></li> </ul> </div> </div> --> </div> </section> <section id="privacy" class="section gray"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="heading"> <h3><span>privacy policy</span></h3> </div> <div class="sub-heading"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque ex diam, vestibulum nec mauris eget, interdum venenatis mauris. sed vel dictum lectus. suspendisse volutpat blandit viverra. praesent turpis nibh, iaculis et tellus in, dignissim tempus enim. suspendisse nec massa orci. pellentesque eu leo sagittis, bibendum ligula at, dignissim leo. donec facilisis eget metus vel maximus. sed sit amet interdum augue. donec finibus, arcu non tempus sagittis, lectus dui auctor lectus, placerat egestas eros tellus venenatis lacus. nulla fringilla turpis eget erat imperdiet, sed dictum dolor imperdiet. etiam sollicitudin lectus non feugiat vehicula. </p> </div> </div> </div> </div> </section> <!-- section works --> <!-- section contact --> <section id="contact" class="section"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="heading"> <h3><span>get in touch</span></h3> </div> <div class="sub-heading"> <p> lorem ipsum dolor sit amet, mutat paulo simul per no, assum fastidii vituperata eam no. </p> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <h4>we online</h4> <p> don't hesitate in touch! </p> <!-- map --> <div id="section-map" class="clearfix"> <img src="assets/img/dummies/online-ad-management.gif"> </div> </div> <div class="col-md-6"> <h4><i class="icon-envelope"></i><strong>contact form</strong></h4> <!-- start contact form --> <div class="cform" id="contact-form"> <div id="sendmessage">your message has been sent. thank you!</div> <div id="errormessage"></div> <form action="" method="post" role="form" class="contactform"> <div class="form-group"> <input type="text" name="name" class="form-control" id="name" placeholder="your name" data-rule="minlen:4" data-msg="please enter @ least 4 chars" /> <div class="validation"></div> </div> <div class="form-group"> <input type="email" class="form-control" name="email" id="email" placeholder="your email" data-rule="email" data-msg="please enter valid email" /> <div class="validation"></div> </div> <div class="form-group"> <input type="text" class="form-control" name="subject" id="subject" placeholder="subject" data-rule="minlen:4" data-msg="please enter @ least 8 chars of subject" /> <div class="validation"></div> </div> <div class="form-group"> <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="please write us" placeholder="message"></textarea> <div class="validation"></div> </div> <div class="text-center"><button type="submit" class="btn btn-lg btn-theme">send message</button></div> </form> </div> <!-- end contact form --> </div> </div> </div> </section> <!-- end section contact --> <footer> <div class="verybottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="aligncenter"> <ul class="social-network social-circle"> <li><a href="#" class="icorss" title="rss"><i class="fa fa-rss"></i></a></li> <li><a href="#" class="icofacebook" title="facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="#" class="icotwitter" title="twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" class="icogoogle" title="google +"><i class="fa fa-google-plus"></i></a></li> <li><a href="#" class="icolinkedin" title="linkedin"><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="aligncenter"> <p> © heart2heart - right reserved </p> <div class="credits"> <!-- javascript --> <script src="assets/js/jquery.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/jquery-1.9.1.min.js"></script> <script src="assets/js/jquery.easing.js"></script> <script src="assets/js/classie.js"></script> <script src="assets/js/bootstrap.js"></script> <script src="assets/js/slippry.min.js"></script> <script src="assets/js/nagging-menu.js"></script> <script src="assets/js/jquery.nav.js"></script> <script src="assets/js/jquery.scrollto.js"></script> <script src="assets/js/jquery.fancybox.pack.js"></script> <script src="assets/js/jquery.fancybox-media.js"></script> <script src="assets/js/masonry.pkgd.min.js"></script> <script src="assets/js/imagesloaded.js"></script> <script src="assets/js/jquery.nicescroll.min.js"></script> <script src="https://maps.google.com/maps/api/js?sensor=true"></script> <script src="assets/js/animonscroll.js"></script> <script> new animonscroll( document.getelementbyid( 'grid' ), { minduration : 0.4, maxduration : 0.7, viewportfactor : 0.2 } ); </script> <script> $(document).ready(function(){ $('#slippry-slider').slippry( defaults = { transition: 'vertical', usecss: true, speed: 5000, pause: 3000, initsingle: false, auto: true, preload: 'visible', pager: false, } ) }); </script> <script src="assets/js/custom.js"></script> <script src="contactform/contactform.js"></script> <script src="assets/js/typeahead.min.js"></script> </body> </html>
edit 2 based on comment:
if unable clean up/manipulate assets: try adding css (the !importants avoid possible inline styles override):
div#mymodal.modal.fade { opacity: 1 !important; display: none !important; } div#mymodal.modal.fade.in { opacity: 1 !important; } div.modal-dialog { z-index: 999999 !important; } - your modal has following inline styles causing appear overlayed (not sure what's assigning it):
style="opacity: 0.33; display: block;"(try removing them web inspector see go away). - you loading bootstrap files twice, locally & via cdn (both css & js files), in addition this, loading bootstrap theme , bootstrap techie css, jquery 3 times, these causing conflicts.
ideally load
bootstrap.min.css,bootstrap.theme.min,bootstrap.techiecss & custom css file inside of<head></head>,jquery.min,bootstrap.min.js, rest of scripts before</body>tag, once in order.place modal right before closing
</body>tag, it's located inside of<footer></footer>element.
original answer:
- you missing
data-target="#mymodal"on modal trigger navbar option, be:<li><a href="#" data-toggle="modal" data-target="#mymodal">login/register</a></li> - another issue is, placing modal inside of navbar positioned fixed. place outside of positioned element, place @ end before closing
</body>tag.
Comments
Post a Comment