Simplemodal:一页上四次会导致额外的“下一步”或“前一个”按钮
Simplemodal:一页上四次会导致额外的“下一步”或“前一个”按钮
提问于 2010-03-19 23:07:56
注:这是从原来的问题编辑了一个解决方案。原来的问题太长了，思想上有很多错误。为此我道歉。
当调用simplemodal div类的每个实例在链末尾的模态窗口中添加一个额外的next或前级按钮时，我们遇到了一个问题。我们有两个单独的情态内容领域，它们在模态窗口被连接起来。
这是通过有两个div类来解决的：..basic modal和..basic modal，以及页面上脚本的两个实例--。所需要的只是一些CSS..。
.basic-modal-content-foo {
display: none;
}
.basic-modal-content-bar {
display: none;
}下面是脚本的"foo“版本。为bar版本修改div类的4个实例。
<script>
$(function()
{
$('a.foo').each(function()
{
$(this).click(function()
{
$('#modal_' + this.id).modal({
overlayClose:true
});
});
});
var num_divs = $('div.basic-modal-content-foo').length;
$('div.basic-modal-content-foo').each(function(i)
{
/* if there is a previous div add a link to it
*/
if (i > 0)
{
/* get the ID for previous div
*/
var prev_id = $(this).prev('.basic-modal-content-foo').attr('id');
/* add the link with click event
*/
$('<a href="#" class="simplemodal-container-prev"></a>')
.click(function()
{
$.modal.close();
$('#' + prev_id).modal({overlayClose:true});
})
.appendTo($(this));
}
/* if there is a next div add a link to it
*/
if (i < num_divs - 1)
{
/* get the ID for next div
*/
var next_id = $(this).next('.basic-modal-content-foo').attr('id');
/* add the link with click event
*/
$('<a href="#" class="simplemodal-container-next"></a>')
.click(function()
{
$.modal.close();
$('#' + next_id).modal({overlayClose:true});
})
.appendTo($(this));
}
});
});
</script>和一些CSS为每个窗口创建一个图像，通过ul/li列表显示进度条。
生成上述内容的代码如下所示：
<h1>Our HEADLINE</h1>
<div id="basic-modal">
<ul>
<li><a href="#" id="one">TEXT 1</a></li>
<li><a href="#" id="two">TEXT 2</a></li>
<li><a href="#" id="three">TEXT 3</a></li>
<li><a href="#" id="four">TEXT 4</a></li>
<li><a href="#" id="five">TEXT 5</a></li>
<li><a href="#" id="six">TEXT 6</a></li>
</ul>
</div>
<div class="basic-modal-content-foo" id="modal_one">
<img src="link to modal_one.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>
<div class="basic-modal-content-foo" id="modal_two">
<img src="link to modal_two.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>
<div> ... other divs 3 4 and 5 </div>
<div class="basic-modal-content-foo" id="modal_six">
<img src="link to modal_six.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>并在div类中保留"bar“模式的附加文本。
<div class="basic-modal-content-bar" id="modal_seven">
<img src="link to modal_seven.png" alt="portrait 1"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>
<div class="basic-modal-content-bar" id="modal_eight">
<img src="link to modal_eight.png" alt="portrait 2"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>
<div class="basic-modal-content-bar" id="modal_nine">
<img src="link to modal_nine.png" alt="portrait 3"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>
</div>ul/li结构在链接的主页上工作。模态窗口允许浏览所有六种文本。窗口有一个常见的CSS样式，每个模式窗口中都有一个自定义图像，它们是以进度条的形式从"#modal_number img“CSS派生的。
这是三个生平链接之一的相关代码。您将注意到，传记链接，每一个必须有这三个在当前的配置。
<h4>Our HEADLINE</h4>
<div id="basic-modal">
<div class="bottom-widget-text">
<img src="picture" alt="not relevant to the simplemodal problem"/>
<p>Read about person NUMBER 1 by clicking on the following link:
<a href="#" class="bar" id="seven" >Expand</a>
</p>
</div>
</div>同样，“传记”也是从页面的另一个区域打开的。模态窗口允许浏览所有三种生物。bios使用相同的CSS样式的窗口和从"#modal_number img“CSS派生的每个模式窗口中的一个自定义图像作为肖像画。
一切都很顺利。
还有一个问题:页面上有两个JS实例。这能结合成一个脚本吗？
提前谢谢。
DDF
回答 1
Stack Overflow用户
发布于 2010-03-24 17:51:59
还有一个问题:页面上有两个JS实例。这能结合成一个脚本吗？
我看不出为什么不。你试过吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2481099
复制相关文章
相似问题
腾讯云开发者
