Question

我正在内部开展一个项目，并且想要使用simplemodal来显示客户信息，当点击列出所有客户的表格时。

然而这给我带来了一些麻烦，因此我现在问你们。

到目前为止，这是我的代码：

<table border="0" cellpadding="0" cellspacing="0" id="customertable" class="sortable">
<thead>
    <tr class="odd">
        <th>Navn</th>
        <th>Telefon</th>
        <th>Postnummer</th>
        <th>By</th>
    </tr>
</thead>
<tbody>
{foreach $results as $customer}
{strip}
   <tr class="{cycle values='even,odd'}">
      <td class="name" id='mousetracking' title={$customer.name}><a href="#" id="osx{$customer.customerid}">{$customer.name}</a></td>
      <td class="data">{$customer.phone}</td>
      <td class="data">{$customer.postcode}</td>
      <td class="data">{$customer.city}</td>
   </tr>
{/strip}
        <!-- modal content -->
        <div class="modalhidden">
            <div id="osx-modal-content{$customer.customerid}">
                <div id="osx-modal-title">Customer no #{$customer.customerid}</div>
                <div class="close"><a href="#" class="simplemodal-close">x</a></div>
                <div id="osx-modal-data">
                    <h2>Hello! I'm Customer no. #{$customer.customerid}</h2>
                </div>
            </div>
        </div>
{/foreach}
</tbody>
</table>
Displaying {$total} records<br />

<script type="text/javascript">
function addModal(x)
{
    $("osx" + x).addEvent("click", function(){
          var SM = new SimpleModal();
              SM.show({
                "title":"Title",
                "contents": $("#osx-modal-content" + x).html()
              });
        });

}
</script>

正如你可能已经注意到的那样，我正在使用聪明的模板，这很好。

此外，单个simplemodal工作正常 - 但我希望它们中的多个具有不同的内容。

问题是，如果这是一个好主意，或者它应该在一个单独的页面上？

请告诉我，如果我在这里遗漏了一些信息 - 这是我的第一篇文章： - ）

此致弗雷德里克

修改

我现在有了这段代码：

<table border="0" cellpadding="0" cellspacing="0" id="customertable" class="sortable">
<thead>
    <tr class="odd">
        <th>Navn</th>
        <th>Telefon</th>
        <th>Postnummer</th>
        <th>By</th>
    </tr>
</thead>
<tbody>
{foreach $results as $customer}
{strip}
   <tr class="{cycle values='even,odd'}">
      <td class="name" id='mousetracking' title={$customer.name}><a href="#" id="{$customer.customerid}">{$customer.name}</a></td>
      <td class="data">{$customer.phone}</td>
      <td class="data">{$customer.postcode}</td>
      <td class="data">{$customer.city}</td>
   </tr>
{/strip}
        <!-- modal content -->
        <!--<div class="modalhidden">-->
            <div id="modal_{$customer.customerid}">
                <div id="osx-modal-title_{$customer.customerid}">Customer no #{$customer.customerid}</div>
                <div class="close"><a href="#" class="simplemodal-close">x</a></div>
                <div id="osx-modal-data_{$customer.customerid}">
                    <h2>Hello! I'm Customer no. #{$customer.customerid}</h2>
                </div>
            </div>
        <!--</div>-->
{/foreach}
</tbody>
</table>
Displaying {$total} records<br />

与此JS代码一起：

jQuery(function ($) {
    var OSX = {
        container: null,
        init: function () {
            $("a").click(function (e) {
                e.preventDefault(); 

                $('#modal_' + this.id).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 () {
                $('#modal_' + this.id, self.container).show();
                var title = $('#osx-modal-title_' + this.id, self.container);
                title.show();
                d.container.slideDown('slow', function () {
                    setTimeout(function () {
                        var h = $('#osx-modal-data_' + this.id, self.container).height()
                            + title.height()
                            + 20; // padding
                        d.container.animate(
                            {height: h}, 
                            200,
                            function () {
                                $("div.close", self.container).show();
                                $('#osx-modal-data_' + this.id, 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();

});

和原始的jquery.simplemodal.js

我现在唯一的问题是，它使用正确的div加载模态，但该div被隐藏..

Answer 1

好的。我自己设法解决了这个问题。

结束此代码：

<table border="0" cellpadding="0" cellspacing="0" id="customertable" class="sortable">
<thead>
    <tr class="odd">
        <th>Navn</th>
        <th>Telefon</th>
        <th>Postnummer</th>
        <th>By</th>
    </tr>
</thead>
<tbody>
{foreach $results as $customer}
{strip}
   <tr class="{cycle values='even,odd'}">
      <td class="name" id='mousetracking' title={$customer.name}><div id="basic-modal"><a href="#" id="{$customer.customerid}">{$customer.name}</a></div></td>
      <td class="data">{$customer.phone}</td>
      <td class="data">{$customer.postcode}</td>
      <td class="data">{$customer.city}</td>
   </tr>
{/strip}
{/foreach}
</tbody>
</table>
{foreach $results as $customer}
{strip}
        <!-- modal content -->
        <div id="basic-modal-content_{$customer.customerid}" style="display:none;" width="600px">
            <h3>{$customer.name}</h3>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="150px;">Adresse</td>
                    <td>{$customer.address1}<br />{$customer.postcode}&nbsp;{$customer.city}</td>
                </tr>
                <tr>
                    <td width="150px;">Telefon</td>
                    <td>{$customer.phone}</td>
                </tr>
                <tr>
                    <td width="150px;">Fax</td>
                    <td>{$customer.fax}</td>
                </tr>
                <tr>
                    <td width="150px;">Email</td>
                    <td>{$customer.email}</td>
                </tr>
                <tr>
                    <td width="150px;">Website</td>
                    <td>{$customer.web}</td>
                </tr>
            </table>
            <br /><br />
            <h4>Server Setup</h4>
            <code>{$customer.Server_setup}</code>
        </div>
{/strip}
{/foreach}
Displaying {$total} records<br />

与此javascript一起使用：

jQuery(function ($) {
    // Load dialog on page load
    //$('#basic-modal-content').modal();

    // Load dialog on click
    $('#basic-modal a').click(function (e) {
        $('#basic-modal-content_' + this.id).modal({
            overlayClose:true
        });
        return false;
    });

});

它就像一个魅力。

感谢您的所有输入。

一页上有多个simplemodal - 动态

1 个答案: