Question

好的，我试图在模态框中打开abc.html文件（放在同一目录中）。

这是代码，但它似乎不起作用。请帮忙

<!DOCTYPE html> 
<html> 
<head>
    <script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
   <script>
    $(document).ready(function(){
    $("a#someId").on("click", function(){
        $.post("abc.html", function(data){
    $("#myModalDiv").html(data).fadeIn();
    });
    });
});
 </script>
</head> 
<body>        
    <a id="someId" href="">This is a link to abc.html</a>
    <div id="myModalDiv">

    </div>
</body> 
</html>

Answer 1

尝试在此处使用 e.preventDefault() 来阻止您的锚点的默认操作：

$(document).ready(function () {
    $("#someId").on("click", function (e) {
        e.preventDefault();
        $.post("abc.html", function (data) {
            $("#myModalDiv").html(data).fadeIn();
        });
    });
});

此外，由于id是唯一的，因此您只需使用#someId代替a#someId。

Answer 2

以下是您工作代码的fiddle。

$(document).ready(function(e){
    $("a#someId").on("click", function(e) {
        e.preventDefault();

        $.ajax({
            url: '/echo/html/',
            type: 'post',
            data: {
                html: "<p>Hey</p>"
            },
            success: function(data){
              $("#myModalDiv").html(data).fadeIn();
            }
        });
    });
});

据我所知，你大部分都是对的。如您所见，单击该链接会触发一个ajax请求，该请求会填充您的div。上面在Felix的回答中给出了相同的代码，但你说这对你不起作用。这让我想知道究竟什么“不起作用”。

响应（数据）是否出现在div中？如果是这样，您是否关注“淡入淡出”效应？还是模态框？

Ž。

模态框似乎不起作用

2 个答案: