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调用中移除'并解码该网址即可：

$('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');

其中包含iframe的模态

1 个答案: