如何防止href重定向到外页。

时间:2016-12-08 21:21:03

标签: javascript jquery html asp.net twitter-bootstrap

我有一个Index.Html文件,我想在bootstrap模式中打开而不退出模态本身。基本上充当内部链接。我试图使用ASP.net mvc这样做。这个位置是从Captivate 9生成的,我试图将一张幻灯片作为样本添加到Modal中

使用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>

1 个答案:

答案 0 :(得分: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只是您要加载的内容的占位符。

此脚本只是打开窗口并加载内容。几乎从你的控制器拦截它。这可以是您想要加载到此模态窗口的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;
    });
}