1
Ich habe ein Bootstrap Modal, das beim Klicken auf den Link öffnet. Aber es funktioniert einfach nicht mit dem Bootstrap-Karussell auf der Seite. Ich habe versucht, das Karussell HTML über dem modalen HTML und umgekehrt setzen aber nichts half :(Bootstrap Modal funktioniert nicht mit Bootstrap Karussell
Die modale wie this- 
sieht
Aber es sollte eigentlich wie this- 
sein
$('.carousel').carousel({
interval: 4000,
pause: "false"
});
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function(){
$wHeight = $(window).height();
$item.height($wHeight);
});html, body {
\t margin:0;
\t padding:0;
\t height:100%;
\t }
/*Navigation Bar*/
\t .nav {
\t margin:0px; \t
\t }
\t .navbar{
\t margin-bottom:0px;
\t font-family: 'Droid Serif', serif;
\t font-size:20px; \t
\t }
\t .navbar-inverse .navbar-brand{
\t font-size:20px;
\t font-family: 'Droid Serif', serif;
\t color: #fed136; \t
\t }
\t
\t
\t /*Carousel*/
\t
.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
div.form-group{
position:absolute;
top:40%;
left:40%; /* change to whatever you want */
right:auto; /* change to whatever you want */
bottom:auto; /* change to whatever you want */
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
z-index: -1;
}
#footer{
\t background-color:black; \t
\t color:white;
\t font-size:15px;
\t text-align:center;
\t }
\t \t
\t
\t /*Modal*/
\t .modal-header, h4, .close {
\t background-color: #5cb85c;
\t color:white !important;
\t text-align: center;
\t font-size: 30px;
\t }
\t .modal-footer {
\t background-color: #f9f9f9;
\t }
\t .modal-body{
max-height:calc(100vh - 210px);
overflow-y:auto;
}
\t
\t #register .modal-dialog {
\t width:40%;
\t
\t }<! doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
\t
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<!-- Custom CSS -->
<link href="main.css" rel="stylesheet" type='text/css'>
\t
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!--Navigation--> \t
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="conatiner-fluid">
<!--page scroll button for -->
<div class="navbar-header" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar ">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span> \t \t \t
</button>
\t <a class="navbar-brand" href="main.html">Bookify</a>
</div> \t <!--page scroll button-->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li ><a href="main.html">Home</a></li>
<li ><a href="about.html">About</a></li>
\t \t <li ><a href="contact.html">Contact</a></li>
\t \t <li ><a href="cancellation.html">Cancellation</a></li>
<li ><a href="#sign in/sign up" data-toggle="modal" data-target="#myModal">Sign in /Sign up</a></li>
</ul>
\t </div> <!--ul-li-->
\t </div> <!--navbar collapse-->
</div> <!--container-fluid-->
</nav>
<!--Navigation-->
<!--Caresoul-->
<div id="mycarousel" class="carousel slide carousel-fit" data-ride="carousel ">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="bus6.jpg" data-color="lightblue" alt="First Image">
</div>
\t
\t \t
<div class="item">
<img src="road2.jpg" data-color="firebrick" alt="Second Image">
</div>
\t
\t <div class="item">
<img src="seat1.jpg" data-color="firebrick" alt="Second Image">
</div>
\t
<!-- more slides here -->
</div>
<div class="form-group"> <!--Form-->
<label class="control-label requiredField" for="select">
From
<span class="asteriskField">
*
</span>
</label>
<select class="select form-control" id="select" name="select">
<option value="Mumbai">
Banglore
</option>
<option value="Pune">
Delhi
</option>
<option value="Delhi">
Indore
</option>
<option value="Banglore">
Mumbai
</option>
<option value="Indore">
Pune
</option>
</select>
\t
\t <label class="control-label requiredField" for="select">
To
<span class="asteriskField">
*
</span>
</label>
<select class="select form-control" id="select" name="select">
<option value="Mumbai">
Banglore
</option>
<option value="Pune">
Delhi
</option>
<option value="Delhi">
Indore
</option>
<option value="Banglore">
Mumbai
</option>
<option value="Indore">
Pune
</option>
</select>
\t <label>Select Date*</label>
<input type="date" class="form-control input-lg" name="start" placeholder="Check In">
</br>
<a href="search.html" class="btn btn-success btn-block" role="button">Search</a>
</div>
\t
<!--Form-->
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--Caresoul-->
<!--Footer-->
<div id="footer">
<div class="container">
\t <div class="row">
<div class="col-md-12"> </br>
\t \t <ul class="list-inline">
\t \t <li> <a href="main.html">Home</a></li>
\t \t <li><a href="about.html">About</a> </li>
\t \t <li> <a href="contact.html">Contact</a> </li>
\t \t <li ><a href="cancellation.html">Cancellation</a></li>
<li ><a href="#sign in/sign up" data-toggle="modal" data-target="#myModal">Sign in /Sign up</a></li>
\t \t </ul>
</div> </br></br></br></br>
<div class="col-md-12"> Copyright © 2016 Bookify. All Rights Reserved</div> \t \t
\t </div>
</div>
</div>
<!--Footer-->
<!-- Modal -->
<div class="modal fade" id="myModal" 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 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="email"><span class="glyphicon glyphicon-envelope"></span> Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter password" required>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? <a data-dismiss="modal" data-toggle="modal" data-target="#register">Sign up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
<!---Modal1---->
<!---Modal2---->
<div class="modal fade" id="register" 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 style="color:red;"><span class="glyphicon glyphicon-lock"></span>Register</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="firstName"><span class="glyphicon glyphicon-user"></span>Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Name" required>
</div>
\t \t \t <div class="form-group">
<label for="email"><span class="glyphicon glyphicon-envelope"></span>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
\t \t \t
\t \t \t <div class="form-group">
<label for="phonenum"><span class="glyphicon glyphicon-phone"></span>Phone Number (format: xxxx-xxxxxx)</label>
<input type="tel" pattern="^\d{4}-\d{6}$" class="form-control" placeholder="Number"required>
</div>
\t \t \t \t
<div class="form-group">
<label for="birthDate"><span class="glyphicon glyphicon-calendar"></span>Date of Birth</label>
<input type="date" id="birthDate" class="form-control" required>
</div>
\t \t \t
\t \t \t <div class="form-group">
<label class="control-label col-sm-3">Gender</label>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="radio-choice" required>Female
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="radio-choice" required >Male
</label>
</div>
</div>
</div>
\t \t \t \t \t
\t \t \t \t \t <div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" required>I accept <a href="#">terms</a>
</label>
</div>
</div>
</div> <!--form-group -->
\t \t \t
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Register</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
\t \t <p>Already a member?<a data-dismiss="modal" data-toggle="modal" data-target="#myModal">Sign in</a></p>
</div>
</div>
</div>
</div>
<!---Modal2---->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
\t
\t
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
<!--Custome Jquery-->
<script src="main.js"></script>
</body>
</html>
Nein, es funktioniert nicht auf Chrom Version 50.0.2661.87 m. Ich habe die Frage bearbeitet, um Bilder von Modal hinzuzufügen, um zu zeigen, wie es aussieht und wie es aussehen sollte – Learner
@shuchi Ich habe die Antwort aktualisiert. –
Obwohl dies das modale Arbeiten macht, aber das Entfernen dieser Formulargruppe bricht CSS das Formular auf der Seite zusammen. Es scheint, dass Form und Modal kollidieren. – Learner