Bootstrap modal не запускается через jquery data-remote-load

Я пытаюсь реализовать этот скрипт скрипта multiple remote modal load, я могу видеть удаленный файл в сетевом инспекторе, загружаемом кликом, но модальный не запускается.Bootstrap modal не запускается через jquery data-remote-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

источник

2015-04-30 dflow

Ваш CSS толкая экран модального выключения может быть? Я думаю, что я видел, что это произошло –

Я взял базовый шаблон для начальной загрузки Bootstrap3, я попытался вызвать не удаленный модальный и его триггеры. Справил его здесь: http://laravel.io/bin/mGJom – dflow

Ваша версия не удается из-за "Cross-Origin Request Blocked".

jsfiddle работает, потому что он загружается из одного домена. Если вы посмотрите на URL нижнего правого кадра (а не на URL-адрес в браузере), это тот же домен, что и URL-адреса, которые он пытается загрузить с помощью кнопок.

Ваше решение в сообщении предупреждение об ошибке, показанного на консоли JavaScript:

This can be fixed by moving the resource to the same domain or enabling CORS.

Есть сообщения на этом сайте о работе с CORS (обмен кросс-происхождения ресурсов), но в основном вы должны добавить заголовок на удаленных URL-адресах, если у вас есть доступ к этому.

Добавление кода, который работает для меня

<!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>

бутстрапе 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">&times;</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>

источник

2015-05-01 14:56:16

Я не вижу эта ошибка в моей консоли, я работаю над своим локальным хостом, а локальные файлы «удаленные файлы» находятся в том же каталоге, что и html-страница. – dflow

Кнопки 1 и 4 пытаются вызвать fiddle.jshell.net. Localhost должен работать на 2 и 3. Я считаю, что когда я смотрел рано, это было предупреждение, хотя, а не ошибка –

да, я удалил эти кнопки, вызывающие fiddle.jshell.net, он по-прежнему дает мне затухающий прозрачный фон модального, но не модального window – dflow

Bootstrap modal не запускается через jquery data-remote-load

ответ

Смежные вопросы