Question

我目前是Bootstrap Modals的初学者。我只是想问为什么外部URL没有出现在模态中？

以下是我正在尝试做的一个例子： http://www.screencast.com/t/YLWJeAwkPK

以下是整个HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Modals with Remote URL</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<script type="text/javascript" charset="utf-8">
$('a.btn').on('click', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
});
</script>

<body>
    <a data-toggle="modal" class="btn" href="http://www.bing.com" data-target="#myModal">click me</a>
    <div class="modal hide fade" 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">
        </div>
    </div>
</body>
</html>

代码来自http://jsfiddle.net/f2Fcd/。我只是复制并粘贴它并探索它。有谁知道代码有什么问题？或许我错过了什么？非常感谢您的回复。：）

Bootstrap URL Modal没有出现？

0 个答案: