Bootstrap：模态和折叠不起作用
首先让所有人都知道，我使用了其他主题并且我使用了bootstrap模式并崩溃但是它没有工作我不知道为什么它这样做。看链接： Click on here for see what is problem i got.!!!
点击“搜索”图标，我添加了崩溃，但它也无效。请提前帮助谢谢。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Climate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="" />
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Merriweather:300,400italic,300italic,400,700italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icons.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="css/simple-line-icons.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="fh5co-container">
<div class="js-sticky">
<div class="fh5co-main-nav">
<div class="container-fluid">
<div class="fh5co-menu-1 col-sm-9">
<ul>
<li><a href="#" data-nav-section="home">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu-dropdown">
<li><a href="#"><i class="fa fa-bullseye" aria-hidden="true"></i> Observatory</a></li>
<li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Objectives</a></li>
<li><a href="#"><i class="fa fa-database" aria-hidden="true"></i> Components</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Data <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu-dropdown">
<li><a href="#"><i class="fa fa-line-chart" aria-hidden="true"></i> Tools</a></li>
<li><a href="#"><i class="fa fa-file-text" aria-hidden="true"></i> Data Access</a></li>
<li><a href="#"><i class="fa fa-file-text-o" aria-hidden="true"></i> Local Climate Data</a></li>
<li><a href="#"><i class="fa fa-soundcloud" aria-hidden="true"></i> Regional Climate Data</a></li>
</ul>
</li>
<li><a href="#">Weather Forecasting</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Education Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="fh5co-menu-2 col-sm-3">
<button class="header-login" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
<select class="selectpicker" data-width="fit">
<option data-content='<span class="flag-icon flag-icon-es"></span>'></option>
<option data-content='<span class="flag-icon flag-icon-gb"></span>'></option>
</select>
<button class="search-icon" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><img src="images/search-icon.png"></button>
<div class="collapse" id="collapseExample">
<div class="well">
...............Search Area Text will be here...............
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fh5co-home" class="js-fullheight" data-section="home">
<div class="flexslider">
<div class="fh5co-text">
<div class="container">
<div class="row">
<h1 class="to-animate"><a href="#"><img src="images/logo.png" alt=""></a></h1>
<h2 class="to-animate maintitle">Welcome to Información Climática</h2>
</div>
</div>
</div>
<ul class="slides">
<li style="background-image: url(images/slide_1.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_2.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_3.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_4.jpg);" data-stellar-background-ratio="0.5"></li>
</ul>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap DateTimePicker -->
<script src="js/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Stellar Parallax -->
<script src="js/jquery.stellar.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
direction: "vertical",
animation: "fade"
});
});
$(function(){
$('.selectpicker').selectpicker();
});
</script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
这是自定义Javascript代码：
;(function () {
'use strict';
// iPad and iPod detection
var isiPad = function(){
return (navigator.platform.indexOf("iPad") != -1);
};
var isiPhone = function(){
return (
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1)
);
};
var fullHeight = function() {
if ( !isiPad() && !isiPhone() ) {
$('.js-fullheight').css('height', $(window).height());
$(window).resize(function(){
$('.js-fullheight').css('height', $(window).height());
})
}
};
var sliderMain = function() {
$('#fh5co-home .flexslider').flexslider({
animation: "fade",
slideshowSpeed: 5000
});
$('#fh5co-home .flexslider .slides > li').css('height', $(window).height());
$(window).resize(function(){
$('#fh5co-home .flexslider .slides > li').css('height', $(window).height());
});
};
var sliderSayings = function() {
$('.clients-area .flexslider').flexslider({
animation: "slide",
slideshowSpeed: 5000,
directionNav: false,
controlNav: false,
directionNav: true,
smoothHeight: true,
animationLoop: true,
itemWidth: 160,
itemMargin: 7,
minItems: 2,
maxItems: 7,
move: 1,
});
}
var fs = $('#fh5co-sayings .flexslider'),
dataItem = fs.data('item'),
item = fs.find('.item');
// Wrap divs
for (var i = 0; i < item.length; i+=dataItem) {
item.slice(i, i+dataItem).wrapAll('<div class="items"></div>');
}
// Initialize flexslider
fs.flexslider({
selector: '.slides > .items',
animation: "slide",
animationLoop: false,
directionNav: false,
slideshow: false,
smoothHeight: true,
itemMargin: 0,
minItems: 1,
maxItems: 1
});
var offcanvasMenu = function() {
$('body').prepend('<div id="fh5co-offcanvas" />');
$('body').prepend('<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>');
$('.fh5co-main-nav .fh5co-menu-1, .fh5co-main-nav .fh5co-menu-2').each(function(){
var $this = $(this);
$('#fh5co-offcanvas').append($this.clone());
});
// $('#fh5co-offcanvas').append
};
var mainMenuSticky = function() {
var sticky = $('.js-sticky');
sticky.css('height', sticky.height());
$(window).resize(function(){
sticky.css('height', sticky.height());
});
var $section = $('.fh5co-main-nav');
$section.waypoint(function(direction) {
if (direction === 'down') {
$section.css({
'position' : 'fixed',
'top' : 0,
'width' : '100%',
'z-index' : 2
}).addClass('fh5co-shadow');;
}
}, {
offset: '400px'
});
$('.js-sticky').waypoint(function(direction) {
if (direction === 'up') {
$section.attr('style', '').removeClass('fh5co-shadow');
}
}, {
offset: function() { return -$(this.element).height() + 69; }//70 ki bjaye 69 likhain ge to theek ho jaye ga
});
};
$(function() {
var header = $(".fh5co-main-nav");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.removeClass('fh5co-main-nav').addClass("fh5co-main-nav darkHeader");
} else {
header.removeClass("fh5co-main-nav darkHeader").addClass('fh5co-main-nav');
}
});
});
// Parallax
var parallax = function() {
$(window).stellar();
};
// Burger Menu
var burgerMenu = function() {
$('body').on('click', '.js-fh5co-nav-toggle', function(event){
var $this = $(this);
$('body').toggleClass('fh5co-overflow offcanvas-visible');
$this.toggleClass('active');
event.preventDefault();
});
};
var scrolledWindow = function() {
$(window).scroll(function(){
var scrollPos = $(this).scrollTop();
$('#fh5co-home .fh5co-text').css({
'opacity' : 1-(scrollPos/300),
'margin-top' : (-212) + (scrollPos/1)
});
$('#fh5co-home .flexslider .fh5co-overlay').css({
'opacity' : (.5)+(scrollPos/2000)
});
if (scrollPos > 200) {
$('#fh5co-home .fh5co-text').css('display', 'none');
} else {
$('#fh5co-home .fh5co-text').css('display', 'block');
}
});
$(window).resize(function() {
if ( $('body').hasClass('offcanvas-visible') ) {
$('body').removeClass('offcanvas-visible');
$('.js-fh5co-nav-toggle').removeClass('active');
}
});
};
var goToTop = function() {
$('.js-gotop').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $('html').offset().top
}, 500);
return false;
});
};
// Page Nav
var clickMenu = function() {
var topVal = ( $(window).width() < 769 ) ? 0 : 58;
$(window).resize(function(){
topVal = ( $(window).width() < 769 ) ? 0 : 58;
});
$('.fh5co-main-nav a:not([class="external"]), #fh5co-offcanvas a:not([class="external"])').click(function(event){
var section = $(this).data('nav-section');
if ( $('div[data-section="' + section + '"]').length ) {
$('html, body').animate({
scrollTop: $('div[data-section="' + section + '"]').offset().top - topVal
}, 500);
}
event.preventDefault();
// return false;
});
};
// Reflect scrolling in navigation
var navActive = function(section) {
$('.fh5co-main-nav a[data-nav-section], #fh5co-offcanvas a[data-nav-section]').removeClass('active');
$('.fh5co-main-nav, #fh5co-offcanvas').find('a[data-nav-section="'+section+'"]').addClass('active');
};
var navigationSection = function() {
var $section = $('div[data-section]');
$section.waypoint(function(direction) {
if (direction === 'down') {
navActive($(this.element).data('section'));
}
}, {
offset: '150px'
});
$section.waypoint(function(direction) {
if (direction === 'up') {
navActive($(this.element).data('section'));
}
}, {
offset: function() { return -$(this.element).height() + 155; }
});
};
// Animations
var homeAnimate = function() {
if ( $('#fh5co-home').length > 0 ) {
$('#fh5co-home').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
$('#fh5co-home .to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var aboutAnimate = function() {
var about = $('#fh5co-about');
if ( about.length > 0 ) {
about.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
about.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
about.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var sayingsAnimate = function() {
var sayings = $('#fh5co-sayings');
if ( sayings.length > 0 ) {
sayings.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
sayings.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var featureAnimate = function() {
var feature = $('#fh5co-featured');
if ( feature.length > 0 ) {
feature.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
feature.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
feature.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('bounceIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var typeAnimate = function() {
var type = $('#fh5co-type');
if ( type.length > 0 ) {
type.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
type.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var foodMenusAnimate = function() {
var menus = $('#fh5co-menus');
if ( menus.length > 0 ) {
menus.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
menus.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
menus.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var eventsAnimate = function() {
var events = $('#fh5co-events');
if ( events.length > 0 ) {
events.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
events.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
events.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var reservationAnimate = function() {
var contact = $('#fh5co-contact');
if ( contact.length > 0 ) {
contact.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
contact.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
contact.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var footerAnimate = function() {
var footer = $('#fh5co-footer');
if ( footer.length > 0 ) {
footer.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
footer.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
footer.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
// Document on load.
$(function(){
fullHeight();
sliderMain();
sliderSayings();
offcanvasMenu();
mainMenuSticky();
parallax();
burgerMenu();
scrolledWindow();
clickMenu();
navigationSection();
goToTop();
// Animations
homeAnimate();
aboutAnimate();
sayingsAnimate();
featureAnimate();
typeAnimate();
foodMenusAnimate();
eventsAnimate();
reservationAnimate();
footerAnimate();
});
}());
2 个答案:
答案 0 :(得分：2)
我认为问题在于css。通过检查您的网站代码，我可以看到您的模态被许多具有相对或固定定位的div包裹。
只需在所有div之外获取模态代码，您的问题就会得到解决。按以下方式放置 -
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Climate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="" />
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Merriweather:300,400italic,300italic,400,700italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icons.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="css/simple-line-icons.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="fh5co-container">
<div class="js-sticky">
<div class="fh5co-main-nav">
<div class="container-fluid">
<div class="fh5co-menu-1 col-sm-9">
<ul>
<li><a href="#" data-nav-section="home">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu-dropdown">
<li><a href="#"><i class="fa fa-bullseye" aria-hidden="true"></i> Observatory</a></li>
<li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Objectives</a></li>
<li><a href="#"><i class="fa fa-database" aria-hidden="true"></i> Components</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Data <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu-dropdown">
<li><a href="#"><i class="fa fa-line-chart" aria-hidden="true"></i> Tools</a></li>
<li><a href="#"><i class="fa fa-file-text" aria-hidden="true"></i> Data Access</a></li>
<li><a href="#"><i class="fa fa-file-text-o" aria-hidden="true"></i> Local Climate Data</a></li>
<li><a href="#"><i class="fa fa-soundcloud" aria-hidden="true"></i> Regional Climate Data</a></li>
</ul>
</li>
<li><a href="#">Weather Forecasting</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Education Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="fh5co-menu-2 col-sm-3">
<button class="header-login" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button>
<select class="selectpicker" data-width="fit">
<option data-content='<span class="flag-icon flag-icon-es"></span>'></option>
<option data-content='<span class="flag-icon flag-icon-gb"></span>'></option>
</select>
<button class="search-icon" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><img src="images/search-icon.png"></button>
<div class="collapse" id="collapseExample">
<div class="well">
...............Search Area Text will be here...............
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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 id="fh5co-home" class="js-fullheight" data-section="home">
<div class="flexslider">
<div class="fh5co-text">
<div class="container">
<div class="row">
<h1 class="to-animate"><a href="#"><img src="images/logo.png" alt=""></a></h1>
<h2 class="to-animate maintitle">Welcome to Información Climática</h2>
</div>
</div>
</div>
<ul class="slides">
<li style="background-image: url(images/slide_1.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_2.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_3.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_4.jpg);" data-stellar-background-ratio="0.5"></li>
</ul>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap DateTimePicker -->
<script src="js/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Stellar Parallax -->
<script src="js/jquery.stellar.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
direction: "vertical",
animation: "fade"
});
});
$(function(){
$('.selectpicker').selectpicker();
});
</script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
答案 1 :(得分：0)
我复制了你的代码。它在这里工作正常。运行代码段
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<button class="header-login" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？