Question

我有http://chessresearcher.com/test-02.html，它应该加载http://chessresearcher.com/hello.html作为模态，但它不会显示它！我究竟做错了什么？我把代码保持在最低限度。代码源http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url可以使用。

http://chessresearcher.com/test-02.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap Modals with Remote URL</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<script>
$('#button_id').click(function(){
    $('#myModal').modal('show')
});
</script>

<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>

<body>

<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="hello.html" role="button" id="button_id" class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Launch Demo Modal</a>

    <!-- Modal HTML -->
    <div id="myModal" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>Confirmation</h3>
        </div>
        <div class="modal-body">
            <!-- Content will be loaded here from a remote source  -->
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>
</div>
</body>

</html>

和：http://chessresearcher.com/hello.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>untitled</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

</head>

<body>

<p>Hello, World!</p>

</body>

</html>

Answer 1

问题是角度ui和bootstrap 3的组合。我无法找到解决问题的链接，但解决方法是添加此css：

.modal {
display: block;
height: 0;
overflow: visible;
}

另见this link。

bootstrap模态只显示黑暗的屏幕（没有模态）

1 个答案: