允许用户点击一个图像，一个配置文件弹出窗口出现

Question

我正在为一个网站写一个“关于团队”的页面。我想把8个团队成员的照片放在页面上，当用户点击图片时，一个配置文件应该会出现在一个模式弹出窗口中。

我知道jQuery模式弹出窗口，但主要问题是我需要8个不同的弹出窗口(每个团队成员一个)。我该怎么做呢--有没有可用的插件？

Answer 1

您可以使用jQuery UI对话框：

HTML：

<div id="profile-dialog" title="Member's profile"></div>

JS：

$('#profile-dialog').html('Content for specific member');
$('#profile-dialog').dialog({
    modal: true,
    width: 400,
    buttons: {
        'close': function() {
            $('#profile-dialog').dialog("close");
        }
    }
});

Answer 2

以下是我对您提出的问题的解决方案：

HTML Markup:

<body>
<img src="images/img.png/jpg/gif" alt="" width="" height="" id="image name"/>
<div id="image name-dialog" title="Description"></div> 

    *The id inside this div tag is very important. Always add -dialog tag to the image 
     name. this will be used by the java script to identify the image and append the 
     dialog box to it*.

    *Create as many HTML mark ups for the images you need the dialog for with the div 
     dialog tag as shown above*.


Java Script (insert this script before the </body> tag of your html page:

<script>
$('#image name-dialog').html('type content for dialog here');
$('#image name-dialog').dialog({
            autoOpen:false / true,
    draggable:false /true,
    closeOnEscape:false /true,
    resizable:false /true,
    position:"left" "right",
    hide:{effect: "fade" / "pop"},
    show:{effect: "fade" / "pop"},
    width:00, (give a number, say, 500 / 400 etc)
     modal:true / false,

buttons: {
    'close': function() {
        $('#image name-dialog').dialog("close");
        }
    }
});
$( "#image name" ).click(function(){
    $( "#image name-dialog" ).dialog("open");
});

    * Add the same code with the appropriate / respective image id and image 
    description for the next image. Do this for all your images*

</script>
</body>
</html>

    Now save your html document, open the saved document in a browser and click on    
    the image. You will see a pop coming up on the page with the contents you want. In 
    the  java script you can change the position, size, effect, width etc to position 
    and size the dialog box as you want it to look. 

    This works. Worked for me smoothly. 


    You can post any content inside the dialog box. I haven't yet found out a solution 
    to add css styles to the dialog box yet.

    Hope this works for you. Coding gurus, please correct me if I am wrong. :)


    Regards