Foreach循环中奇怪的SimpleMODAL OSX操作 [英] Bizarre SimpleMODAL OSX actions in Foreach Loop
问题描述
我正在使用 PHPBB3 论坛(已合并到该站点)在 Wordpress MU 网站上进行开发.网站上有一个页面，该页面利用 SimpleModal OSX样式模态对话框来查询某些网站用户数据.我还使用了一个插件，该插件可让您为每个用户创建自定义元信息，称为 Cimy User Extra Fields .在详细探讨该问题之前，我想确保我对自己的解释是透彻的，因为我显然不是以前那样.
问题所在.........
问题在于，在使用 SimpleModal OSX样式模态对话框 jquery函数的页面上.在此页面上，它查询网站用户数据，并通过PHP中的Foreach序列进行查询；在div列内的页面上显示数据.使用 SimpleModal OSX样式模态对话框的代码部分显示为各列中列出的每个用户旁边的按钮.
单击激活模态"窗口的按钮时；该模式窗口的内部是该用户的元数据.每个模态窗口中存储的数据应该与每个用户匹配.相反，它仅显示页面上所有模式窗口中在系统中找到的第一个用户的数据.
最初，我已经通过foreach循环运行了该函数，并且存储在MODAL窗口中的结果数据是相同的数据-而不是该函数从数据库查询的每个用户所独有.
一个示例是该网站上有10个用户，因此foreach循环将在此页面的列中返回4个用户.您可以在此处看到视觉效果.
如果您正在查看页面，则将看到列出了4个用户.对于每个用户，它都会显示其头像图像，显示名称，等级，查看卡通的按钮，挑战按钮以及向他们发送电子邮件的链接.问题出在查看Toons"按钮上.
正如我上面所说，它最初在模式窗口中为每个按钮一遍又一遍地显示相同的数据-而不是每个用户唯一的数据.借助 baba 他把剧本怎么了给了我额头一巴掌.不幸的是，我无法使它正常工作.抱歉，爸爸不太确定我在做什么错.对于我的新手来说，我采用了一种不同的方法，我觉得这可能是一个更简单的解决方案.
正如巴巴提到的那样，问题在于Javascript正在寻找特定的ID来调用创建模式窗口的脚本.由于这是一个foreach循环，因此在我当前的情况下，它将重复查看卡通"按钮4倍.因此，我们有4个按钮，当按下这些按钮时，将弹出一个模态窗口，其中存储了元数据.单击这四个按钮时，所有四个都显示相同的数据.那么，解决方案呢?我们需要以某种方式随机化每个按钮的ID，并使jquery函数能够识别出需要在这些按钮中的每个按钮上激活它.
我花了几个小时试图利用巴巴的想法，但未能付诸实践.因此，我在网上进行了更深入的研究，并在stackoverflow上遇到了这个问题/答案，您可以查看它此处找到了该解决方案.我如何在代码中实现它:
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
现在我已经在代码中使用了此随机字符串生成功能，我需要一种让Jquery函数能够使用数字和字母的随机字符串识别这些ID的方法.我需要一个通配符.....这是我使用的:
$("[id^=osx-modal-content]").modal({
有了这个，我确定可以正常工作！它没有……
奇怪的是，它确实做了一些奇怪的事情，我不确定我在书面上不能很好地解释，如果我在尝试解释它时从视觉上看它所产生的效果会更好.您可以在此处页面查看.
因此，这些小的红色x字符出现在每个查看"按钮的下方.这些小小的红色x字符代表了代码的这一部分:
<div id="osx-modal-content<?php echo $x;?>">
啊！这些是包含每个模态窗口内的元数据的div.为什么红色x出现，我一无所知.更奇怪的是，当您单击4个查看"按钮中的任何一个时.模态窗口不仅没有完全展开，而且就像车库门一样.它下降了一点，然后再向上上升.在向下滑动的过程中，您也看不到元数据.这可能是由于模态窗口没有完全展开的事实.
然后，单击查看卡通按钮后，另一个问题发生.出现在每个卡通"按钮下的红色小x会直接将它们重新定位在第一个查看卡通"按钮下.现在我上面列出的osx-modal-content(随机字符串)的DIV.ID.现在，所有这四个div都在第一视图"卡通按钮下. WTH ???
那是我在伙计们的地方.我希望这段代码的使用正确，对不起Baba，我无法让您的解决方案正常工作，希望对其他愿意帮助您理解我的工作的人来说，这是足够的信息.
================================================ ================================== 更新:正如Pointy提到我应该在应该使用Class的循环中使用ID，因此我查看了样式表并注意到以下代码行:
#osx-modal-content, #osx-modal-data {display:none;}
由于我在#osx-modal-content的末尾添加了随机字母数字字符串.它没有注册显示样式:无.我将其添加到代码中:
<div id="osx-modal-content<?php echo $x;?>" style="display:none">
这使那些讨厌的小红色x消失了.谢谢你的尖尖！我目前正在尝试更改循环中DIV的相应ID/类-看看是否会有所作为.
更新2 :我更改了jquery函数中的第18行，它的原始位置是
$("osx").click(function (e) {
对此:
$("[id^=osx]").click(function (e) {
这使疯狂的，拥有车库的门作用停止了.现在，它会滑出并显示每个用户的元信息.但是，当您单击查看卡通"按钮时，它会立即在框中显示所有用户的元信息，而不仅仅是所选的用户".另外，当您单击每个按钮时，它会根据该用户ID号以ASC顺序列出用户.
更新3 :我几乎肯定模态窗口为何显示所有用户信息的问题是由于我设置了通配符.它会基于以osx-modal-content开头的任何div打开，这将导致它显示每个用户的元信息.我需要针对jquery函数的其他解决方案.
那些愿意看一下并帮助我的人.我在下面列出了完整的代码，查询功能和Jquery函数:
用于查询网站用户元数据的自定义功能:
<?php
function roster()
{
$members = get_users('blog_id=15&exclude=array(1)');
foreach ($members as $user)
{
$item['login'] = $user->display_name;
$item['email'] = $user->user_email;
$item['picture'] = get_cimyFieldValue($user->ID, 'picture');
$item['rank'] = get_cimyFieldValue($user->ID, 'guild_rank');
$item['game'] = get_cimyFieldValue($user->ID, 'game');
$item['avatar'] = get_cimyFieldValue($user->ID, 'avatar');
$item['toon_name'] = get_cimyFieldValue($user->ID, 'character_name');
$item['faction'] = get_cimyFieldValue($user->ID, 'faction');
$item['class'] = get_cimyFieldValue($user->ID, 'class');
$item['role'] = get_cimyFieldValue($user->ID, 'role');
}
unset($members);
return $ret;
}
?>
从函数调用的每个用户的循环:
<?php
$ret = roster();
if ( ! empty($ret))
{
foreach($ret as $v)
{ ?>
<div id = "roster_container">
<div id="left_col">
<div id="first_left_col">
<h4>Avatar</h4>
<?php echo '<li><img src="' . $v['picture'] . '" alt="" /></li>';?>
</div>
<div id="second_left_col">
<h4>Username</h4>
<?php echo '<li>' . $v['login'] . '</li>';?>
</div>
<div id="third_left_col">
<h4>Rank</h4>
<?php echo '<li>' . $v['rank'] . '</li>';?>
</div>
</div>
<div id="right_col">
<div id="first_right_col">
<h4>Toons</h4>
<li>
<div id='osx-modal'>
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
<input type="button" name="osx<?php echo $x;?>" value="View" class="osx<?php echo $x;?>" id="osx<?php echo $x;?>"/>
</div>
<div id="osx-modal-content<?php echo $x;?>" style="display:none;">
<div class="close"><a href="#" class="simplemodal-close">x</a></div>
<div id="osx-modal-data">
<div id="toon_title">Game Characters</div>
<div id="toon_game">
<?php echo '<h3>' . $v['game'] . '</h3>';?>
</div>
<div id="toon_box">
<div id="toon_name"><?php echo $v['toon_name'];?></div>
<div id="toon_avatar"><?php echo '<img src="' . $v['avatar'] . '" alt="" />';?></div>
<div id="toon_faction"><?php echo $v['faction'];?></div>
<div id="toon_class"><?php echo $v['class'];?></div>
<div id="toon_role"><?php echo $v['role'];?></div>
</div>
<p><button class="simplemodal-close">Close</button></p>
</div>
</div>
</li>
</div>
<div id="second_right_col">
<h4>Challenge</h4>
<?php echo '<li><a href="#" class="CHALLENGE">Challenge</a></li>';?>
</div>
<div id="third_right_col">
<h4>Email</h4>
<?php echo '<li><a href="mailto:' . $v['email'] . '"><img src="http://conspirators.websitedesignbyneo.com/wp-content/themes/conspirators/css/dark-red/img/email-icon.gif" style="height:15px;width:20px;margin-top:5px;margin-left:7px;"></a></li>';?>
</div>
</div>
</div>
<?php
}
}
?>
最后是SimpleModal OSX样式模态对话框Jquery:
/*
* SimpleModal OSX Style Modal Dialog
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: osx.js 238 2010-03-11 05:56:57Z emartin24 $
*/
jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$("[id^=osx]").click(function (e) {
e.preventDefault();
$("[id^=osx-modal-content]").modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
self.container = d.container[0];
d.overlay.fadeIn('slow', function () {
$("[id^=osx-modal-content]", self.container).show();
var title = $("#osx-modal-title", self.container);
title.show();
d.container.slideDown('slow', function () {
setTimeout(function () {
var h = $("#osx-modal-data", self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
{height: h},
200,
function () {
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
}
);
}, 300);
});
})
},
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
);
}
};
OSX.init();
});
变量$ ret似乎不包含任何内容?
1-请在您的LI周围使用UL 2-请使用类代替ID
因此，我不太确定您要使用随机数实现什么，并且我不知道overlayId和containerId应该指的是什么，但这看起来是一种更好的处理方式:
<?php
$ret = roster();
if ( ! empty($ret))
{
foreach($ret as $v)
{ ?>
<div class="roster_container">
<div class="left_col">
<div class="first_left_col">
<h4>Avatar</h4>
<?php echo '<li><img src="' . $v['picture'] . '" alt="" /></li>';?>
</div>
<div class="second_left_col">
<h4>Username</h4>
<?php echo '<li>' . $v['login'] . '</li>';?>
</div>
<div class="third_left_col">
<h4>Rank</h4>
<?php echo '<li>' . $v['rank'] . '</li>';?>
</div>
</div>
<div class="right_col">
<div class="first_right_col">
<h4>Toons</h4>
<ul>
<li>
<div class='osx-modal'>
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
<input type="button" name="osx" value="View" class="osx" class="osx"/>
</div>
<div class="osx-modal-content" style="display:none;">
<div class="close"><a href="#" class="simplemodal-close">x</a></div>
<div class="osx-modal-data">
<div class="toon_title">Game Characters</div>
<div class="toon_game">
<?php echo '<h3>' . $v['game'] . '</h3>';?>
</div>
<div class="toon_box">
<div class="toon_name"><?php echo $v['toon_name'];?></div>
<div class="toon_avatar"><?php echo '<img src="' . $v['avatar'] . '" alt="" />';?></div>
<div class="toon_faction"><?php echo $v['faction'];?></div>
<div class="toon_class"><?php echo $v['class'];?></div>
<div class="toon_role"><?php echo $v['role'];?></div>
</div>
<p><button class="simplemodal-close">Close</button></p>
</div>
</div>
</li>
</ul>
</div>
<div class="second_right_col">
<h4>Challenge</h4>
<ul>
<?php echo '<li><a href="#" class="CHALLENGE">Challenge</a></li>';?>
</ul>
</div>
<div class="third_right_col">
<h4>Email</h4>
<ul>
<?php echo '<li><a href="mailto:' . $v['email'] . '"><img src="http://conspirators.websitedesignbyneo.com/wp-content/themes/conspirators/css/dark-red/img/email-icon.gif" style="height:15px;width:20px;margin-top:5px;margin-left:7px;"></a></li>';?>
</ul>
</div>
</div>
</div>
<?php
}
}
?>
<script>
jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$("[name=osx]").click(function (e) {
e.preventDefault();
$(this).parent().next().modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
</script>
I am developing on a Wordpress MU website with a PHPBB3 forum that is merged into the site. On the website there is a page that utilizes SimpleModal OSX Style Modal Dialog that queries some of the website users data. I am also using a plugin that allows you to create custom meta information for each user called Cimy User Extra Fields. Before I go into detail of the problem I want to make sure I am thorough with my explanation as apparently I was not before.
Onto the problem..........
The problem lies in the fact that on the page that utilizes the SimpleModal OSX Style Modal Dialog jquery function. On this page it queries the websites users data and it goes through a Foreach sequance in PHP; displaying the data on the page within div columns. The part of the code that utilizes the SimpleModal OSX Style Modal Dialog is displayed as a button beside each user that is listed in the columns.
When you click the button that activates the Modal window; inside of that modal window is the meta data for that user. The data stored within each modal window is supposed to match each user. Instead it only shows the data for the first user it finds in the system across all modal windows on the page.
Originally I had run the function through a foreach loop and the resulting data that is stored within the MODAL windows is the same data - rather than it being unique to each user that the function queries from the database.
An Example would be that there are 10 users on the website and so the foreach loop would return 4 users on this page listed within columns. You can see a visual representation here.
If you are looking at the page you will see that there are 4 users listed. For each user it displays their Avatar image, Display Name, Rank, a button to view toons, a challenge button and a link to email them. The View Toons button is where the problem lies.
As I said above originally it displayed the same data in the modal window over and over for each button - rather than that data being unique to each user. With the help of baba he gave me the slap on the forehead moment with what was wrong with the script. Unfortunately, I could NOT get it to work. Sorry, Baba not quite sure what I'm doing wrong. I went with a different approach that I "felt" like might be an easier solution for my novice mind.
As Baba has mentioned the problem lies in the fact that the Javascript is looking for a specific ID to call the script that creates the modal window. Since this is a foreach loop then in my current case it repeats the View Toons button 4x. Thus, we have 4 buttons that when pushed will popup a Modal window with meta data stored within. When those 4 buttons are clicked the same data was shown in all four. So, the solution? We need to randomize each button's ID somehow and for the jquery function to be able to recognize that it needs to activate on each of these buttons.
I spent a couple of hours trying to utilize Baba's idea and could not get it to work. So I dug around even deeper on the net and came across this question/answer on stackoverflow you can view it here. The exact same problem I was having and the answer was provided by the Developer of SimpleModal. The only problem was that the answer was based upon id's that already existed and not ID's that would be automatically created within a loop.....
My solution.......
I needed a way to generate a random string of numbers and letters. I found this solution here. How I implemented it into my code:
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
Now that I had this random string generation working in the code, I needed a way for the Jquery function to be able to recognize these ID's with the radom string of numbers and letters. I needed a wildcard.....This is what I used:
$("[id^=osx-modal-content]").modal({
With this, I thought for sure it would work! It did not......
Strangely enough, it did really weird things that I'm not sure I can explain well in writing and it would be much better if you visually look at what it produces as I try and explain it. You can view the page here.
So these little red x characters appear below each View button. These little red x characters represent this part of the code:
<div id="osx-modal-content<?php echo $x;?>">
Ah! these are the div's that contain the meta data within each modal window. Why the red x appears I have no clue. What is even more strange is when you click any of the 4 View Buttons. Not only does the modal window not fully expand out but it is like a garage door that has become possessed. It comes down a bit and then goes right back up. In the process of it sliding down you cannot see the meta data either. This just might be due to the fact that the modal window does not fully expand down though.
Then another problem occurs after you click the view toon button. Those little red x's that appear under each Toon button reposition themselves directly under the first View toon button. Now the DIV.ID for osx-modal-content(random string) that I listed above. All four of those divs are now UNDER the first view toon button. WTH???
That's where I am at guys. I hope I am on the right path with this code and I'm sorry Baba I could not get your solution to work and I hope that this is enough information for you other guys that are willing to help to understand what I'm doing.
================================================================================== Update: As Pointy mentioned that I am using IDs in a loop when it should be Classes, I looked in the style sheets and noticed this line of code:
#osx-modal-content, #osx-modal-data {display:none;}
Since I am adding random alphanumerical strings at the end of #osx-modal-content. It was not registering the style for display:none. I added this to the code:
<div id="osx-modal-content<?php echo $x;?>" style="display:none">
This made those pesky little red x's disappear. Thanks for that Pointy! I am currently in the process of trying to change the DIV's their appropriate ID/Classes that are within the loop - to see if that will make a difference.
Update 2: I changed line 18 in the jquery function which originall was this:
$("osx").click(function (e) {
to this:
$("[id^=osx]").click(function (e) {
This caused the crazy, possessed garage door effect to stop. It now slides out and displays the meta info for each user. However, when you click the View toon button it shows ALL users meta info within the box now instead of just the selected "user". Also, when you click each of the buttons it lists the users in ASC order based upon that users ID number.
Update 3: I am almost positive the problem with why the Modal window displays all of the users info is because of the wildcard I setup. It opens based upon any div that starts with osx-modal-content which will cause it to display each users meta info. I need a different solution for the jquery function.
Those of you that are willing to take a look at this and help me out. I've listed the full code, query function and Jquery function below:
The custom function to query website users meta data:
<?php
function roster()
{
$members = get_users('blog_id=15&exclude=array(1)');
foreach ($members as $user)
{
$item['login'] = $user->display_name;
$item['email'] = $user->user_email;
$item['picture'] = get_cimyFieldValue($user->ID, 'picture');
$item['rank'] = get_cimyFieldValue($user->ID, 'guild_rank');
$item['game'] = get_cimyFieldValue($user->ID, 'game');
$item['avatar'] = get_cimyFieldValue($user->ID, 'avatar');
$item['toon_name'] = get_cimyFieldValue($user->ID, 'character_name');
$item['faction'] = get_cimyFieldValue($user->ID, 'faction');
$item['class'] = get_cimyFieldValue($user->ID, 'class');
$item['role'] = get_cimyFieldValue($user->ID, 'role');
}
unset($members);
return $ret;
}
?>
The Loop for each user called from the Function:
<?php
$ret = roster();
if ( ! empty($ret))
{
foreach($ret as $v)
{ ?>
<div id = "roster_container">
<div id="left_col">
<div id="first_left_col">
<h4>Avatar</h4>
<?php echo '<li><img src="' . $v['picture'] . '" alt="" /></li>';?>
</div>
<div id="second_left_col">
<h4>Username</h4>
<?php echo '<li>' . $v['login'] . '</li>';?>
</div>
<div id="third_left_col">
<h4>Rank</h4>
<?php echo '<li>' . $v['rank'] . '</li>';?>
</div>
</div>
<div id="right_col">
<div id="first_right_col">
<h4>Toons</h4>
<li>
<div id='osx-modal'>
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
<input type="button" name="osx<?php echo $x;?>" value="View" class="osx<?php echo $x;?>" id="osx<?php echo $x;?>"/>
</div>
<div id="osx-modal-content<?php echo $x;?>" style="display:none;">
<div class="close"><a href="#" class="simplemodal-close">x</a></div>
<div id="osx-modal-data">
<div id="toon_title">Game Characters</div>
<div id="toon_game">
<?php echo '<h3>' . $v['game'] . '</h3>';?>
</div>
<div id="toon_box">
<div id="toon_name"><?php echo $v['toon_name'];?></div>
<div id="toon_avatar"><?php echo '<img src="' . $v['avatar'] . '" alt="" />';?></div>
<div id="toon_faction"><?php echo $v['faction'];?></div>
<div id="toon_class"><?php echo $v['class'];?></div>
<div id="toon_role"><?php echo $v['role'];?></div>
</div>
<p><button class="simplemodal-close">Close</button></p>
</div>
</div>
</li>
</div>
<div id="second_right_col">
<h4>Challenge</h4>
<?php echo '<li><a href="#" class="CHALLENGE">Challenge</a></li>';?>
</div>
<div id="third_right_col">
<h4>Email</h4>
<?php echo '<li><a href="mailto:' . $v['email'] . '"><img src="http://conspirators.websitedesignbyneo.com/wp-content/themes/conspirators/css/dark-red/img/email-icon.gif" style="height:15px;width:20px;margin-top:5px;margin-left:7px;"></a></li>';?>
</div>
</div>
</div>
<?php
}
}
?>
And Finally The SimpleModal OSX Style Modal Dialog Jquery:
/*
* SimpleModal OSX Style Modal Dialog
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: osx.js 238 2010-03-11 05:56:57Z emartin24 $
*/
jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$("[id^=osx]").click(function (e) {
e.preventDefault();
$("[id^=osx-modal-content]").modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
self.container = d.container[0];
d.overlay.fadeIn('slow', function () {
$("[id^=osx-modal-content]", self.container).show();
var title = $("#osx-modal-title", self.container);
title.show();
d.container.slideDown('slow', function () {
setTimeout(function () {
var h = $("#osx-modal-data", self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
{height: h},
200,
function () {
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
}
);
}, 300);
});
})
},
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
);
}
};
OSX.init();
});
The variable $ret does not seem to contain anything?
1- please use ULs around your LIs 2- please use classes instead of IDs
So, I am not very sure what you're trying to achieve with the random number, and I don't know what the overlayId and containerId should refer to, but this looks like a much better way of doing things:
<?php
$ret = roster();
if ( ! empty($ret))
{
foreach($ret as $v)
{ ?>
<div class="roster_container">
<div class="left_col">
<div class="first_left_col">
<h4>Avatar</h4>
<?php echo '<li><img src="' . $v['picture'] . '" alt="" /></li>';?>
</div>
<div class="second_left_col">
<h4>Username</h4>
<?php echo '<li>' . $v['login'] . '</li>';?>
</div>
<div class="third_left_col">
<h4>Rank</h4>
<?php echo '<li>' . $v['rank'] . '</li>';?>
</div>
</div>
<div class="right_col">
<div class="first_right_col">
<h4>Toons</h4>
<ul>
<li>
<div class='osx-modal'>
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
<input type="button" name="osx" value="View" class="osx" class="osx"/>
</div>
<div class="osx-modal-content" style="display:none;">
<div class="close"><a href="#" class="simplemodal-close">x</a></div>
<div class="osx-modal-data">
<div class="toon_title">Game Characters</div>
<div class="toon_game">
<?php echo '<h3>' . $v['game'] . '</h3>';?>
</div>
<div class="toon_box">
<div class="toon_name"><?php echo $v['toon_name'];?></div>
<div class="toon_avatar"><?php echo '<img src="' . $v['avatar'] . '" alt="" />';?></div>
<div class="toon_faction"><?php echo $v['faction'];?></div>
<div class="toon_class"><?php echo $v['class'];?></div>
<div class="toon_role"><?php echo $v['role'];?></div>
</div>
<p><button class="simplemodal-close">Close</button></p>
</div>
</div>
</li>
</ul>
</div>
<div class="second_right_col">
<h4>Challenge</h4>
<ul>
<?php echo '<li><a href="#" class="CHALLENGE">Challenge</a></li>';?>
</ul>
</div>
<div class="third_right_col">
<h4>Email</h4>
<ul>
<?php echo '<li><a href="mailto:' . $v['email'] . '"><img src="http://conspirators.websitedesignbyneo.com/wp-content/themes/conspirators/css/dark-red/img/email-icon.gif" style="height:15px;width:20px;margin-top:5px;margin-left:7px;"></a></li>';?>
</ul>
</div>
</div>
</div>
<?php
}
}
?>
<script>
jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$("[name=osx]").click(function (e) {
e.preventDefault();
$(this).parent().next().modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
</script>
这篇关于Foreach循环中奇怪的SimpleMODAL OSX操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
