After upgrading to bootstrap 3.3.7 only one works from my modals.. the rest of them only displays backdrop..
I tried using modal examples just to check if the problem is in my modal code.. but still it only displays backdrop..
whats weird the modal works if I triggered them using this javascript.
<script>
$('.myModal').on('click',function(){
$('.modal-body').load('content.html',function(){
$('#myModal').modal({show:true});
});
});
</script>
my files
index.php
<?php
ob_start();
include('dbcon.php');
include('header.php');
?>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown"> Login
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Student</li>
<li>Teacher</li>
</ul>
</li>
<li class="active"> Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<?php include ('modal_student.php'); ?>
<?php include ('modal_peer.php'); ?>
<?php include ('modal.php'); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body></html>
modal_student.php
<div class="modal fade" id="student" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×
</button>
<strong>Log in</strong> Please fill in the details below...
</div>
</div>
<form class="form-horizontal" method="post" style="margin-left: 54px;">
<div class="form-group">
<label class="control-label" for="inputEmail">LRN</label>
<div class="controls"> <input name="lrn_number"
id="inputEmail" placeholder=" Input your 11 digit LRN" required />
</div>
</div>
<div class="form-group">
<div class="controls">
<button type="submit" name="login" class="btn btn-info"><i
class="icon-signin icon-large"></i> Sign in</button>
</div>
</div>
</form>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"><i
class="icon-remove icon-large"></i>close</button>
</div>
</div>
Modal.php
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<p><div class="alert alert-danger">Are you Sure you want logout?</p>
</div>
<hr>
<div class="modal-footer">
<button class="btn btn-inverse" data-dismiss="modal" aria-hidden="true"><i
class="icon-remove icon-large"></i> No</button>
<a href="logout.php" class="btn btn-primary"><i class="icon-ok icon-large">
</i> Yes</a>
</div>
</div>
I'm guessing you've taken a look at this?
https://getbootstrap.com/docs/3.3/javascript/#modals.
Also in your tags make sure that bootstrap.js comes before bootstrap.css
Related
I created this piece of code but for some reason both the login modal and the dropdown menu don't work.
jsfiddle.net
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
Parks <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Alcazar Park</li>
<li>Municipality Park</li>
<li>OSE Park</li>
</ul>
</li>
<li><a href="contactus.html"><span class="fa fa-envelope-o"
aria-hidden="true"></span> Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="modal" data-target="#loginModal">
<span class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login </h4>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="Email" class="form-control input-sm">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password" class="form-control input-sm">
</div>
<div class="checkbox">
<label style="color:black;">
<input type="checkbox"><small>Remember Me</small>
</label>
</div>
<button type="submit" id="signIn" class="btn btn-info btn-sm">Sign In</button>
<button type="button" id="cancelModal" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
Any ideas what could be wrong? I find it very weird,as I can't find any mistake.
Thanks,
Theo.
it is missing jquery library.
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://jsfiddle.net/nwen88pk/3/
For both Bootstrap features you're looking for (Modal and Dropdown), jQuery is required. Your code in your fiddle is missing the jQuery library.
https://code.jquery.com/jquery-3.2.1.min.js
Also, you must include the jQuery library before including the Bootstrap JavaScript.
I have tried every way to imitate this look in style and columns and just cannot get it with Bootstrap 3.
Can someone list the twitter bootstrap markup for this:
http://postimg.org/image/ftbd0fxtv/
I have been stuck for may days now.
I have tried the following:
<div class="container">
<div class="row">
<div class="col-md-8"></div>
<div class ="col-md-4"></div>
</div>
</div>
thanks
demo: http://www.bootply.com/BCsPapR7Ww
html:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="page-header">
<h1>Example page header<br><small>Subtext for header</small></h1>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">Menu option 1</div>
<div class="col-sm-4">Menu option 2</div>
<div class="col-sm-4">Menu option 3</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
</div>
</div>
<nav class="text-center">
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><span aria-hidden="true">»</span><span class="sr-only">Next</span></li>
</ul>
</nav>
<footer class="container">
<div class="row">
<div class="text-center">link 1 | link 2</div>
<div class="text-center">Powered by Bootstrap</div>
</div>
</footer>
file index.html
<div class="button-edit"><button type="button" data-toggle="modal" data-target=".addNewProduct" class="edit" data-id="107"><i class="fa fa-edit"></i>
I have the following HTML code (I'm using Bootstrap Twitter Modal):
<div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;" class="modal fade addNewProduct">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="#" method="post" onsubmit="return false">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close close-product-modal">×</button>
<h4 id="myLargeModalLabel" class="modal-title">Edit Group</h4>
</div>
<div class="modal-body">
<div class="form-horizontal col-lg-6 col-sm-6 col-xs-12">
<fieldset class="product-info">
<div class="form-group">
<label for="product-id" class="col-md-4 control-label">Group Name *</label>
<div class="col-md-8 input">
<input id="product-id" placeholder="<?php echo $this->Item['group_name']?>" type="text" class="form-control"/>
</div>
</div>
..........
I want that onclick the button, after the bootstrap modal will open, there will be alert with the 'data-id' value.
can you help me?
I'm using the Default NavBar of Bootstrap 3.2. The collapse is working when the window is resized down, but the button is not displaying the links when cliked. This is what I have until now:
<body>
<div class="mainHeader">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap Test</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>enlace1</li>
<li>enlace2</li>
<li>enlace3</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</body>
Any idea? Thanks in advance.
you have to verify your tags you have an additional DIV, i've tried it on bootply.com its working fine
<body>
<div class="mainHeader">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap Test</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>enlace1</li>
<li>enlace2</li>
<li>enlace3</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</body>
UPDATE
you have to consider adding <div class="container"> under the nav tag, like the updated code !
UPDATE 2
you have to check the jQuery minimum version required by bootstrap3 check this link
I have two different forms on my navbar and would like to maximize the space being used. As you can see in this example - http://jsfiddle.net/zb4dc/6/, the search would ideally be taking up the remaining space. Is there anyway to make this work?
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">My Account</li>
</ul>
<form class="navbar-form navbar-left searchArea" role="search">
<div class="form-group">
<input id="searchBar" class="form-control typeahead" type="text" placeholder="Search">
</div>
</form>
<form class="navbar-form navbar-right" role="tag">
<div class="form-group">
<input id="userTags" type="text" class="form-control" placeholder="Tags">
</div>
<button id="addTags" type="submit" class="btn btn-default">Add Tags</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
Try this..
http://www.bootply.com/119937
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-left navbar-nav">
<li class="active">My Account</li>
</ul>
<form class="navbar-form navbar-right" role="tag">
<div class="form-group">
<input id="userTags" type="text" class="form-control" placeholder="Tags">
</div>
<button id="addTags" type="submit" class="btn btn-default">Add Tags</button>
</form>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
Seems like the only way to get it to work is using "inline" and the input group.