0

我有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>
4

1 回答 1

1

问题是angular ui和bootstrap 3的组合。我找不到为我解决问题的链接，但解决方案是添加这个css：

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

另请参阅此链接。

于 2013-12-16T03:59:34.030 回答