javascript - 模态框内有 iframe

Question

我正在尝试在模态体内打开 iframe。我正在动态添加 src。但它会将主后台页面的 url 添加到打开的 URL 中。

我尝试过的是？

<div id="myModal" class="modal fade modal-box myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xlg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3 class="margin-none" id="myModalLabel"></h3>
            </div>
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-body">
                        Hi User, How are you??
                        <iframe src="about:blank" style="zoom:0.80" frameborder="0" height="250" width="99.6%"></iframe>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

<a data-url="http%3A%2F%2Ftimesofindia.indiatimes.com%2Fentertainment%2Fhindi%2Fbollywood%2FKangana-Ranauts-interesting-statements%2Fphotostory%2F47070425.cms" data-news-source="Times of India" data-target="#myModal" data-toggle="modal" href="javascript:;">Kangana Ranaut's interesting statements</a>


$('#myModal').on('show.bs.modal', function (e) {
    var heading = e.relatedTarget.dataset.newsSource,
            newsUrl = e.relatedTarget.dataset.url,
            $modal = $(this);
    $("#myModalLabel").html("News Source - " + heading);
    $('iframe').attr({src: newsUrl});
    console.log(newsUrl);
});

它在控制台上给出错误，请求的网址:http://localhost/desibazar/news/%27http%3A%2F%2Ftimesofindia.indiatimes.com%2Fentertainment%2Fhindi%2Fbollywood%2FKangana-Ranauts-interesting-statements%2Fphotostory%2F47070425.cms%27 “在服务器上找不到。

第二个问题是在 dom 完成时将 css 规则添加到 modal-header 中。在我的 ModalBox 中显示它未显示模态标题。

Answer 1

您只需从 iframe 调用中删除 ' 并解码 URL，它就应该可以工作:

$('iframe').attr({src: decodeURIComponent(newsUrl)});

编辑:

如果你想隐藏关闭按钮，你只需保留按钮元素并使用 javascript 隐藏它:

$('#myModal').on('show.bs.modal', function (e) {
    ...
    $(this).find('.modal-header button.close').css('display','none');
    ...
});

然后要启用它，您必须使用以下代码:

$('#myModal').find('.modal-header button.close').css('display','block');