Jquery 简单模式问题-倍数、内容消失_Jquery_Simplemodal

Jquery 简单模式问题-倍数、内容消失

jquery

Jquery 简单模式问题-倍数、内容消失,jquery,simplemodal,Jquery,Simplemodal,我是一名jQuery新手，通过在脚本中执行以下操作，操纵了Simple Modal，允许我在一个页面上有多个模式： $（'input.basic，a.basic'）。单击（函数（e）{ e、预防默认值（）； $（this.next（'.basicModalContent'）.modal（）； }); 这是我的HTML： <a class="basic linkHeading" href="#">Link Heading</a> <div class="

我是一名jQuery新手，通过在脚本中执行以下操作，操纵了Simple Modal，允许我在一个页面上有多个模式：

$（'input.basic，a.basic'）。单击（函数（e）{
e、 预防默认值（）；
$（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-->


此资源需要登录


我遇到的问题是，在第一次单击并关闭时，一切正常。第二次单击启动模式，但所有内容都从框中消失
查看此链接以了解正在运行的bug：
当您隐藏对话框时，jQuery会更改div在DOM中的位置，然后希望使用“$（this）”来定位它。接下来（…）
”，您不能这样做。你应该有一些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();
   }
});

我想提出如下建议：
链接：
<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>

类似的方法应该可以做到这一点。
需要较少标记的解决方案是使用单一模式的“窗口”。请参见以下示例：

<!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>



简单模态演示
$（文件）。准备好了吗(
函数（）{
$（'.loginRequired'）.bind（'click'，
函数（）{
$（'#clickedLink'）.html（this.id）；
$（'#modalWindow'）.modal（）；
返回false；
}
);
}
);
#SimpleModel容器{显示：无；}
#SimpleModel覆盖{背景：#000；不透明度：0.4；}
#模态窗口{
背景：#FFF；
边框：1px纯黑；
高度：100px；
不透明度：1.0；
填充：10px；
位置：相对位置；
宽度：220px；
z指数：1010；
}




抱歉，您必须登录才能单击“未知”

该页面正在提取动态内容，因此我无法知道可能有多少模式链接，也无法知道如何引用它们。这太完美了，非常感谢eric（您的客户支持是最好的！！）
$(document).ready(function () {
      $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
              e.preventDefault();
              var content = '#' + this.id + '-content';
              $(content).modal();
      });
});


<!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>