将Json对象放在fancybox中

时间:2013-12-25 08:25:49

标签: jquery ajax codeigniter fancybox

当用户点击第一行然后点击查看按钮时,我想使用Fancybox查看A的信息。下表已经在fancybox中。

| Id | Name |
|  1 |  A   |
|  2 |  B   |

我用ajax获取信息,我得到了正确的信息。但是我不知道如何将这些信息放在fancybox中。如何实施?任何帮助将非常感谢。

$("#viewUser").click(function() {
    var string = $.ajax({
                     type: "POST",
                     url: 'home/viewUser', 
                     async: false,
                     data: {'id': id}, 
                     dataType: "JSON"
               }).responseText;
    var temp=JSON.parse(string);
    var firstName = temp.firstName;
    var lastName = temp.lastName;
    var username = temp.username;
    var email = temp.email;
    var userType = temp.userType;
    var area = temp.area;

    $.fancybox({ 
        'width': '50%', 
        'height': '62%', 
        'autoScale': true,
        'autoSize': false,  
        'transitionIn': 'fade', 
        'transitionOut': 'fade', 
        'type': 'inline', 
        'href': '#viewUser_fancybox',
        'modal': true

    }); 
    return false;

     });
})

1 个答案:

答案 0 :(得分:1)

您可以使用ajax内容打开fancybox。 我的建议是当你打电话给“home / viewUser?id = your_id”时返回html内容并实现像fancy那样的花哨框;

<a class="user-info fancybox.ajax" href="home/viewUser?id=your_id">User Info</a>

$(document).ready(function() {
    $(".user-info").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});