引导模式对话框出现在页面的一侧
我点击缩略图时会出现一个模态对话框。我有一个带有基本自举网格布局的js（从在线资源中获取）。
问题是50％的弹出窗口似乎悬挂在页面边缘。它似乎工作母鸡我减少页面的宽度。
我的代码如下（nb;你不需要js来看这个）
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
<title>site name</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="logo" href="img/logo.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
<h1 class="page-header">Thumbnail Gallery</h1>
<div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="Short alt text" />
</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive" src="" />
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-8 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
4 个答案:
答案 0 :(得分：4)
以下小提琴显示模态工作。
与上一个答案一样，您应该查看HTML的结构。
https://jsfiddle.net/6zzrL8ow/1/
<div class="container">
<div class="row">
<div class="col-lg-4">
<h1 class="page-header">Thumbnail Gallery</h1>
<div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="Short alt text" />
</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive" src="" />
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-8 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：1)
初始部分是否在一行内？如果没有，它应该是。似乎模态部分紧跟第一部分后面的 col-lg-4 。由于第一部分保留了4列，它可以抵消模态。尝试将该部分包装成行并将模态部分留在其外部。
<body>
<div class="row">
<div class="col-lg-4">
<h1 class="page-header">Thumbnail Gallery</h1>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="Short alt text">
</a>
</div>
</div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive" src="">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-8 text-justify" id="image-gallery-caption">
This text will be overwritten by jQuery
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
</body>
答案 2 :(得分：0)
答案是删除下面的头部参考：
请参阅下面的一个很好的弹出式图库的起始模板，其中包含网页上的图片（不适用于本地图片，工作时间）。
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
<title>site name</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="logo" href="img/logo.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
<h1 class="page-header">Thumbnail Gallery</h1>
<div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="Short alt text" />
</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive" src="" />
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-8 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 3 :(得分：0)
我遇到了同样的问题，发现它与我的模式html的设置无关。在我的情况下，我的_Layout.cshtml没有从我的bootswatch主题引用正确的样式表。更正我的样式表参考可解决此问题。
我需要替换
<script type="text/javascript">
$(function() {
var start = moment('<?php echo $start; ?>','DDMMYYYY');
var end = moment('<?php echo $end; ?>','DDMMYYYY');
function cb(start, end) {
alert(start);
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
$('body').append($('<form/>')
.attr({'action': './invoiceList', 'method': 'post', 'id': 'replacer'})
.append($('<input/>')
.attr({'type': 'hidden', 'name': 'start', 'value': start.format('DDMMYYYY')})
)
.append($('<input/>')
.attr({'type': 'hidden', 'name': 'end', 'value': end.format('DDMMYYYY')})
)
).find('#replacer').submit();
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
//cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function (ev, picker) {
console.log('start: '+picker.startDate.format('YYYY-MM-DD'));
console.log('end : '+picker.endDate.format('YYYY-MM-DD'));
days = (moment(picker.endDate)-moment(picker.startDate))/ 1000/60/60/24;
console.log('Range : '+Math.round(days)+' days' );
});
$(document).ready(function() {
$('#invoice').DataTable();
} );
</script>
与
<link rel="stylesheet" href="~/Content/bootstrap.css" />
（用自定义样式表替换bootrap-cerulean）
帮助您解决情况可能为时已晚，但希望对您有所帮助。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？