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

允许用户单击图像并显示配置文件弹出窗口

2 个答案: