gpt4 book ai didi

php - 一页上的多个简单模式 - 动态

转载 作者:搜寻专家 更新时间:2023-10-31 21:15:15 24 4
gpt4 key购买 nike

我正在做一个内部项目,想在列出所有客户的表格中单击时使用 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>

您可能已经注意到,我使用 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="{$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 是隐藏的..

最佳答案

好的。我设法自己修复了它。

结束了这段代码:

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

});

它就像一个魅力。

感谢所有的输入。

关于php - 一页上的多个简单模式 - 动态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10286663/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com