Question

我正在尝试在index.html上显示外部内容（另一个页面）模式，但它无效。

模态显示为页眉和页脚，但模态正文未加载外部页面或其中的任何内容。

我在模态体（标题，段落，......）中创建了一些标签，但没有显示任何内容。

的index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $('.openPopup').on('click', function () {
            var dataURL = $(this).attr('data-href');
            $('.modal-body').load(dataURL, function () {
                $('#myModal').modal({ show: true });
            });
        });
    });
</script>

</head>

<body>
<nav class="navbar navbar-default">
    ...
</nav>
<div class="container">
    <div id="about-me">
        <div class="jumbotron">
            <h1 class="about-me-title">Título</h1>
            <p></p>
        </div>
        <div class="row about-me-row">
            <div class="col-md-6 no-padding black-hover">
                <a class="openPopup" href="javascript:void(0);" data-href="./modal.html">
                    <img class="img-responsive" src="assets/img/block01.png">
                </a>
            </div>
            <div class="col-md-6 no-padding black-hover">
                <img class="img-responsive" src="assets/img/block02.png">
            </div>
        </div>
        <div class="row about-me-row">
            <div class="col-md-6 no-padding black-hover">
                <img class="img-responsive" src="assets/img/block03.png">
            </div>
            <div class="col-md-6 no-padding black-hover">
                <img class="img-responsive" src="assets/img/block04.png">
            </div>
        </div>
        <div class="row about-me-row">
            <div class="col-md-6 no-padding black-hover">
                <img class="img-responsive" src="assets/img/block01.png">
            </div>
            <div class="col-md-6 no-padding black-hover">
                <img class="img-responsive" src="assets/img/block03.png">
            </div>
        </div>
        <div class="row decription-row"></div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Bootstrap Modal with Dynamic Content</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
<!-- /Modal -->
<footer class="footer">
    <p>@ 2018</p>
</footer>

Answer 1

如果您从文件协议访问，基于Chromium的浏览器会阻止通过AJAX访问文件，因此，只需从Web服务器（http协议）打开您的页面。

Bootstrap模式不显示内容

1 个答案: