Bootstrap modal not displaying content

Question

I'm trying to display an external content (another page) modal over my index.html but it's not working.

Modal is displayed with header and footer but the modal body is not loading the external page or anything else inside of it.

I created some tags inside modal body (headings, paragraphs, ...) but nothing is displayed.

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 modal not displaying content

Question

1 answers

solution1
1 ACCPTED 2018-02-24 21:35:55

Bootstrap modal not displaying content

Question

1 answers

solution1 1 ACCPTED 2018-02-24 21:35:55

solution1
1 ACCPTED 2018-02-24 21:35:55