我有一个 Bootstrap 模式，单击链接即可打开。但它不适用于页面上的 Bootstrap 轮播。 我尝试将轮播 HTML 放置在模态 HTML 之上，反之亦然，但没有任何帮助:(
模态看起来像这样 -
但其实应该是这样的——
$('.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 {
margin:0;
padding:0;
height:100%;
}
/*Navigation Bar*/
.nav {
margin:0px;
}
.navbar{
margin-bottom:0px;
font-family: 'Droid Serif', serif;
font-size:20px;
}
.navbar-inverse .navbar-brand{
font-size:20px;
font-family: 'Droid Serif', serif;
color: #fed136;
}
/*Carousel*/
.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{
background-color:black;
color:white;
font-size:15px;
text-align:center;
}
/*Modal*/
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
.modal-body{
max-height:calc(100vh - 210px);
overflow-y:auto;
}
#register .modal-dialog {
width:40%;
}<! 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="">
<!-- 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'>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!--Navigation-->
<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>
</button>
<a class="navbar-brand" href="main.html">Bookify</a>
</div> <!--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>
<li ><a href="contact.html">Contact</a></li>
<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>
</div> <!--ul-li-->
</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>
<div class="item">
<img src="road2.jpg" data-color="firebrick" alt="Second Image">
</div>
<div class="item">
<img src="seat1.jpg" data-color="firebrick" alt="Second Image">
</div>
<!-- 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>
<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>
<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>
<!--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">
<div class="row">
<div class="col-md-12"> </br>
<ul class="list-inline">
<li> <a href="main.html">Home</a></li>
<li><a href="about.html">About</a> </li>
<li> <a href="contact.html">Contact</a> </li>
<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>
</div> </br></br></br></br>
<div class="col-md-12"> Copyright © 2016 Bookify. All Rights Reserved</div>
</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>
<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>
<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>
<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>
<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>
<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 -->
<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>
<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>
<!-- 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>最佳答案
在 html 中为 slider 上的表单使用 id 选择器
<div id="example-form" class="form-group">
并在main.css中将div.form-group更改为#example-form
#example-form{
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 */
}
这样样式仅应用于页面上的表单，而不应用于模式中的表单。
关于javascript - Bootstrap 模式不适用于 Bootstrap 轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36822283/