質問

Ok so I am trying to open abc.html file ( placed in same directory ) in modal box.

This is the code but it doesn't seem to work. Please help

<!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>

正しい解決策はありません

他のヒント

Try to use e.preventDefault() here to prevent default action of your anchor:

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

Also, because id is unique, you just need to use #someId instead of a#someId.

Here is a fiddle of your working code.

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

As far as I can tell, you've got it mostly right. As you can see, clicking on the link fires an ajax request, which populates your div. The same code is given above in Felix' answer, but you said this doesn't work for you. This leads me to wonder exactly what "doesn't work".

Does the response (data) appear in the div? If so, are you concerned about the "fadeIn" effect? Or the modal box?

z.

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top