私は、ウェブサイトの「チームについて」ページで作業しています。私はページに8人のチームメンバーの写真を載せたいと思います。ユーザーが画像をクリックすると、モーダルポップアップにプロファイルが表示されます。ユーザーが画像をクリックするとプロフィールのポップアップが表示されます
私はjQueryモーダルポップアップを認識していますが、主な問題は8つの異なるポップアップ（各チームメンバーに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");
}
}
});
ここにあなたが尋ねた質問に対する私のソリューションです：
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