Question

How would you use simplemodal within a foreach loop so that it does not repeat the same information?

Example:

foreach($ret as $v)
{
        <div id='osx-modal'>
        <input type='button' name='osx' value='View' class='osx demo'/>
        </div>

        <div id="osx-modal-content">
            <div class="close"><a href="#" class="simplemodal-close">x</a></div>
                <div id="osx-modal-data">                                                                                               
                    <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>
                </div>
}

The meta data is pulled from users on the website and displays that meta data for each user in separate Modals. For clarification let’s say foreach is repeated 10x since here is 10 users in the database. That will create 10 separate buttons for each user, that when you click the modal box pops up with the data inside of it.

The problem is, that when you click each button its the same user in each modal box. How would you set this up so each modal box displays the correct user meta data. I’ve already checked if persistence is set to false in simplemodal.js and it is.

Answer 1

Finally got it to work thanks to standup75!

 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
                });
            });
      },