I'm activating a modal from a responsive navbar. Right now it opens and
runs down the page and then disappears. Trying to get the modal to just
open and stay visible until the user clicks the close button.
I've tried three tutorial scripts that activate from a button and they work
great - can't get the same result in the navbar.
I'm a web Designer working on first bootstrap site. Keep thinking I can add
a class to do this? Tried locating a list of classes - how do I find these?
Any help is appreciated.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/><!-- need for iphone -->
<title>Navbar w modal</title>
<!-- HTML5 shim for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js";></script>
<![endif]-->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/global.css" rel="stylesheet">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-modal.js"></script>
</head>
<body>
<!-- BRANDING NAVBAR -->
<div class="navbar-wrapper"><!-- absolutely positions the navbar -->
<div class="navbar">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering
responsive navbar (not covered in tutorial). Needs responsive CSS to work.
-->
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Essential New Technologies</a>
<!-- Responsive Navbar Part 2: Place all collapsable
navbar items within .navbar-collapse -->
<div class="nav-collapse pull-right">
<ul class="nav">
<li><a href="#" style="font-size:.9em;
font-weight:bold;">OUR COMPANY</a></li>
<li><a href="#myModal" data-toggle="modal"
style="font-size:.9em; font-weight:bold;">CONTACT US</a></li>
</ul>
<form class="navbar-search" action="">
<input type="text" class="search-query span2"
placeholder="Search">
</form>
</div><!-- .nav-collapse -->
</div><!-- .navbar-inner -->
</div><!-- .navbar -->
</div><!-- .navbar-wrapper -->
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal"></button>
<h3>Contact Us</h3>
</div>
<div class="modal-body">
<p>To learn more about our products and service offering,
please contact us via telephone or the email address show below. We will
make every effort to provide a personal response to your inquiry.</p>
<p>Essential New Technologies, LLC<br />
5117 Darlington Rd<br />
Holiday, FL 34690<br />
</p>
<p>727-938-9304</p>
<p><a
href="mailto:[email protected]";>[email protected]</a></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
