simplemodal 直接不带 iframe

Question

我之前有一篇关于 simplemodal 和 iframe 如何使用 onclick 内联调用 simplemodal？

但现在我想调用 div 而不是 iframe 文件。

我所拥有的与 simplemodal 调用 iframe 的效果非常好：

 <a href="http://ibm.com" data-width="586" data-height="570" class="ibm_modal">IBM</a>

<script>
    $('.ibm_modal').click(function(e) {
        var hrefval= $(this).attr("href"); 
        var $this = $(this); var height_len = $this.data("height"); 
        var width_len = $this.data("width"); 
        $.modal(
            '<iframe src="' + hrefval + '" height="' +height_len + '" width="' +width_len + '" style="border:none; overflow:auto; margin:0 9px; padding:0; padding-top:10px">', {
           closeHTML:"", 
           overlayCss: {
               backgroundColor:"#000", 
               opacity:85
           },
           containerCss: {
               backgroundColor:"#B9B54F", 
               borderColor:"#B9B54F", 
               border:0, 
               padding:15, 
               height:'height_len+15', 
               width:'width_len+15'
           }, 
           overlayClose: true
        }); 
        e.preventDefault();
    });
</script>

相反，我希望 simplemodal 调用 div。从概念上讲，我不理解这一点。

我想我明白以下这一行必须废弃并可能用 div 引用替换，对吗？： ” “

这样可以吗？我不认为它指定了目标 div。所以它dw。

<a data-width="586" data-height="570" class="ibm_modal">IBM</a>

<div style="display:hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

我想要一个链接，单击该链接会打开上面的示例 div。我怎样才能做到这一点？我不明白埃里克网页中的基本示例。我喜欢我的语法，我只想更改它以调用 div 而不是 iframe 和文件。

Answer 1

为您的

提供一个 id 或 class，然后将其用于您的 jquery 选择器。

例子：

<div id='myContainer'><p>Lorem ipsum dolor</p></div>


$(".modal").click(function(e) {

    $('#myContainer").modal({

      width: $this.data("width"),
      height: $this.data("height"),
      animate: true,
      opacity: 60
    })
    e.stopPropagation();
    return false;
  })