문제

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