简单的模态问题-倍数，内容消失 [英] Simple Modal issues - Multiples, Disappearing Content

问题描述

我是jQuery的新手，并且通过在脚本中执行以下操作来操纵简单模态，以使我在页面上拥有多个模态:

I'm a jQuery newbie and have rigged Simple Modal to allow me to have more than one modal on a page by doing this in my script:

$('input.basic, a.basic').click(function (e) { e.preventDefault(); $(this).next('.basicModalContent').modal(); });

$('input.basic, a.basic').click(function (e) { e.preventDefault(); $(this).next('.basicModalContent').modal(); });

这是我的HTML:

    <a class="basic linkHeading" href="#">Link Heading</a>

 <div class="basicModalContent" style="display: none;">
    <h1>This Resource Requires Login</h1>
    <a href="#" class="simplemodal-close" title="Close">Cancel</a></p>
</div><!--basicModal-->

我遇到的问题是，在第一次点击时，一切都正常运行&关闭.第二次单击将启动模态，但是所有内容都从框内消失了.

The issue I'm running into is everything works fine on first click & close. The second click launches the modal, but all the content is gone from inside the box.

请参阅此链接以获取正在使用的错误: http://blanksky.com/test/ebenefits21/modal.html

see this link for the bug in action: http://blanksky.com/test/ebenefits21/modal.html

推荐答案

我建议如下:

链接:

<a href="#" class="basic" id="link-1">link1</a>
<a href="#" class="basic" id="link-2">link2</a>
<a href="#" class="basic" id="link-3">link3</a>

隐藏内容(通过CSS或嵌入式样式)

Hidden content (via CSS or inline style)

<div id="link-1-content" style="display:none">
<p>content</p>
</div>
<div id="link-2-content" style="display:none">
<p>content</p>
</div>
<div id="link-3-content" style="display:none">
<p>content</p>
</div>

JavaScript:

JavaScript:

$(document).ready(function () {
      $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
              e.preventDefault();
              var content = '#' + this.id + '-content';
              $(content).modal();
      });
});

类似的事情应该可以解决问题.

Something like that should do the trick.

这篇关于简单的模态问题-倍数，内容消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！