3
私は内部的にプロジェクトを進めており、すべての顧客がリストされているテーブルをクリックすると、シンプルモダルを使用して顧客情報を表示したいと考えています。複数のシンプルモダルを1ページに - 動的に
しかし、これは私にいくつかの問題を引き起こしているので、今私はあなたに頼んでいます。あなたは、私が正常に動作テンプレート、のためのSmartyを使用しています気づいたかもしれませんが
<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>
：
これは、これまでのところ、私のコードです。
また、1つのシンプルモードがうまくいきますが、私はそれらの複数のコンテンツを別々にしたいと思います。
これはいい考えですか、それとも別のページにあるべきなのでしょうか。
：これはよろしく、 フレデリック
EDIT
:-)私の最初の投稿です、私は今、このコードを持っている - 私はここにいくつかの情報が不足していた場合
してくださいは、教えて
<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要素が隠されているという。..
"これは私にいくつかのトラブルを引き起こしました..."、どのような問題がありますか？また、例をまとめる方が良いかもしれません。 – Alexander
問題は、上記のコードを動作させることができず、何が間違っているのか理解できないことです。 –
エリック・マーティンのシンプルモダールですか？それを使用して、コードベースに「SimpleModal」プロトタイプはありません。 '$ .modal'を使ってダイアログを開きます。 –