javascript - 如何防止href重定向到外部页面。

Question

我有一个 Index.Html 文件，我想在 Bootstrap 模式内部打开该文件而不退出模式本身。本质上充当内部链接。我正在尝试使用 ASP.net mvc 来做到这一点。该位置是从 Captivate 9 生成的，我正在尝试将单个幻灯片作为示例添加到模态中

Javascript:

var modal3 = document.getElementById('myModal3');
var img3 = document.getElementById('myImg3');
var modalImg3 = document.getElementById("img03");
img3.onclick = function () {
    modal3.style.display = "block";

}

var span = document.getElementsByClassName("close")[2];
span.onclick = function () {
    modal3.style.display = "none";
}

模态:

<div id="myModal3" class="modal">
    <span class="close" style="color:white">×</span>
</div>

Answer 1

我写的与此类似的东西是使用 Ajax。我不确定你想走这条路，但至少值得一试!您需要添加的只是在您单击的某些元素上添加 btnCreate id，它应该可以工作!

    <!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

html about 只是您要加载的内容的占位符。

此脚本只是打开窗口并加载内容。几乎从你的 Controller 拦截它。这可以是您想要加载到此模态窗口中的 PartialView!

$(function () {
    $.ajaxSetup({ cache: false });

    $("body").on("click", "#btnCreate", function (e) {
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                backdrop: 'static',
                keyboard: true
            }, 'show');
            bindForm(this);
        });

        return false;
    });
});

然后关闭模式窗口。

function bindForm(dialog) {
     $('form', dialog).submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {
                    $('#myModal').modal('hide');
                } else {
                    $('#myModal').modal('hide');
                }
            }
        });
        return false;
    });
}