Question

我是一个jQuery新手并且已经操纵了简单模态，允许我在我的脚本中通过这样做在页面上有多个模态：

$('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-->

我遇到的问题是一切正常，第一次点击＆amp;关。第二次单击启动模式，但所有内容都从框内消失。

请参阅此链接了解操作中的错误：http://blanksky.com/test/ebenefits21/modal.html

Answer 1

我会建议像：

链接：

<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或内联风格）

<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的：

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

这样的事情应该可以解决问题。

Answer 2

当你隐藏对话框时，jQuery会改变DOM中div的位置，然后想要用“$(this).next(...)”找到它，你做不到。您应该有一些ID或引用来另外定位。

修改好吧，你让我有点回想。我希望我正在经历的代码是有用的。我没有测试过：

$('input.basic, a.basic').click(function (e) { e.preventDefault(); var el = ""; if($(this).data("xid")!=undefined) { el = $($(this).data("xid")); } else { var xid = "xid_" + ((new Date()).getTime()); el = $(this).next('.basicModalContent'); $(this).data("xid", xid); if (el.lenght>0) el.attr("id", xid); } if (el.lenght>0) { el.modal(); } });

Answer 3

需要较少标记的解决方案是使用单个模态“窗口”。请参阅以下示例：


<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Simple Modal Demo</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="simplemodal.js"></script>
 <script type="text/javascript">
  $(document).ready(
    function() {
     $('.loginRequired').bind('click',
      function() {
       $('#clickedLink').html(this.id);
       $('#modalWindow').modal();
       return false;
      }
     );
    }
  );
 </script>

 <style>
  #simplemodal-container { display: none; }
  #simplemodal-overlay { background: #000; opacity: 0.4; }
  #modalWindow {
   background: #FFF;
   border: 1px solid black;
   height: 100px;
   opacity: 1.0;
   padding: 10px;
   position: relative;
   width: 220px;
   z-index: 1010;
  }
 </style>
</head>
<body>
 <p><a href="http://example.com/" id="link1" class="loginRequired">Login Required Link</a></p>
 <p><a href="http://example.com/" id="link2" class="loginRequired">Login Required Link</a></p>
 <p><a href="http://example.com/" id="link3" class="loginRequired">Login Required Link</a></p>
 <p><a href="http://example.com/">http://example.com/</a></p>

 <div id="simplemodal-container">
  <div id="modalWindow">
   <p>Sorry, you must login to click <b id="clickedLink">unknown</b>.</p>
   <p><a href="#" class="simplemodal-close">Cancel</a></p>
  </div>
 </div>

</body>
</html>

简单的模态问题 - 倍数，消失的内容

3 个答案: