我正在尝试实现这个小提琴脚本multiple remote modal load,我可以看到网络检查器中的远程文件在点击时加载,但是模式没有被触发。
这是我正在努力工作的代码:
<script>
$('[data-load-remote]').on('click', function (e) {
e.preventDefault();
var $this = $(this);
var remote = $this.data('load-remote');
if (remote) {
$($this.data('remote-target')).load(remote);
}
});
</script>
链接到完整代码http://laravel.io/bin/2W3E2
答案 0 :(得分:3)
由于“跨源请求被阻止”,您的版本失败。
jsfiddle正在运行,因为它是从同一个域加载的。如果您查看右下方框架的网址(而不是浏览器中的网址),则该网址与尝试使用按钮加载的网址相同。
您的解决方案位于Javascript控制台中显示的警告错误消息中:
This can be fixed by moving the resource to the same domain or enabling CORS.
此网站上有关于使用CORS(跨源资源共享)的帖子,但基本上您需要在远程网址上添加标题,前提是您有权访问。
添加适合我的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('[data-load-remote]').on('click',function(e) {
e.preventDefault();
var $this = $(this);
var remote = $this.data('load-remote');
if(remote) {
$($this.data('remote-target')).load(remote);
}
});
});//]]>
</script>
</head>
<body>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-remote-target="#myModal .modal-body">Btn 1</a> <a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/1/show/" data-remote-target="#myModal .modal-body">Btn 2</a>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/2/show/" data-remote-target="#myModal .modal-body">Btn 3</a>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/3/show/" data-remote-target="#myModal .modal-body">Btn 4</a>
<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</body>
</html>
bootstrap 3:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('[data-load-remote]').on('click',function(e) {
e.preventDefault();
var $this = $(this);
var remote = $this.data('load-remote');
if(remote) {
$($this.data('remote-target')).load(remote);
}
});
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});
});//]]>
</script>
</head>
<body>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-remote-target="#myModal .modal-body">Btn 1</a> <a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/1/show/" data-remote-target="#myModal .modal-body">Btn 2</a>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/2/show/" data-remote-target="#myModal .modal-body">Btn 3</a>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/3/show/" data-remote-target="#myModal .modal-body">Btn 4</a>
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-hidden="true">×</button>
<h4 class="modal-title">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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>