ow3*_*w3n 4 javascript jquery modal-dialog twitter-bootstrap
我正在使用Chrome中的两个Bootstrap 3模式页面.在您打开开发人员控制台并启动其中一个模态之前,一切都会正常.您可以使用此jsfiddle重复此问题,再次使用最新的Chrome,或使用以下代码创建一个html页面.
http://jsfiddle.net/ow3n/22ENG/
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function launchReportModal(){
$('#reportModal').modal();
}
function launchShareModal(){
$('#shareModal').modal();
}
</script>
</head>
<body>
<a href='#reportModal' onclick='launchReportModal()' class='report_link' data-toggle='modal' data-target='#reportModal'>report</a>
<a href='#shareModal' onclick='launchShareModal()' class='report_link' data-toggle='modal' data-target='#shareModal'>share</a>
<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Report <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Share <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
</body>
</html>
编辑:使用jQuery选择器在html中启动模式修复了问题,但你仍然可以在jsfiddle中看到问题.
$('#launchReportModal').on('click', function(){
$('#reportModal').modal();
});
$('#launchShareModal').on('click', function(){
$('#shareModal').modal();
});
<a href='#' id='launchReportModal' data-toggle='modal' data-target='#reportModal'>report</a>
<a href='#' id='launchShareModal' data-toggle='modal' data-target='#shareModal'>share</a>
您正尝试自动激活模态并同时手动激活它们!如果您阅读文档:
无需编写JavaScript即可激活模态.在控制器元素上设置data-toggle ="modal",如按钮,以及data-target ="#foo"或href ="#foo",以定位要切换的特定模态.
你有两个
<a href='#' id='launchReportModal' data-toggle='modal' data-target='#reportModal'>report</a>
和
$('#launchReportModal').on('click', function(){
$('#reportModal').modal();
});
错误是这样触发的:
$.fn.modal (_relatedTarget)
Modal.toggle (_relatedTarget)
Modal.hide (_relatedTarget)
_relatedTarget 被视为代码中的事件:
Modal.prototype.hide = function (e) {
if (e) e.preventDefault()
-> Uncaught TypeError: Object http://fiddle.jshell.net/22ENG/2/show/# has no method 'preventDefault'
但是_relatedTarget不是一个事件,它是一个元素.显然data-target比您的$(element).modal()代码具有更高的排名.
解决方案:只是跳过你的javascript激活模式 - > http://jsfiddle.net/QFyv9/ - 使用3.1.1 bootstrap.js的未分化版本分叉jsFiddle(所以我可以追踪问题)
| 归档时间： |
|
| 查看次数： |
3210 次 |
| 最近记录： |