Question

我可以在某种程度上使用Eric Martin的simplemodal。但我想将其称为内联 onclick 。

像这样的内联：

<a href="http://ibm.com" onclick="$.modal({url:'http://ibm.com',
width:586,height:570,animate:true,opacity:60})"> IBM </a>

不喜欢这样:(通常位于页面底部）

$('.free_modal').click(function(e) {var hrefval= $(this).attr("href");
$.modal('<iframe src="' + hrefval + '" height="535" width="1000" 
style="border:none; margin:0 9px; padding-bottom:0; padding-top:10px">',
{closeHTML:"", overlayCss: {backgroundColor:"#000", opacity:85},
containerCss:{backgroundColor:"#B9B54F", borderColor:"#B9B54F", border:20,
height:555,padding:10, width:1020}, overlayClose:true}); e.preventDefault();
});
</script>

任何人都可以告诉我该怎么做。我阅读了文档，但对我来说并不清楚。也许这不应该完全与“onclick”内联完成，也许可以调用具有合理默认值的类（即没有高度和宽度的类以及文字URL）。

我在one simplemodal script to handle images上发过一篇相关帖子，其中包含：

<script>
$(document).ready(function(){
$(".photo").click(function(e) {
  var hrefval= $(this).attr("href"); 
  $.modal('<img src=" ' + hrefval + '">', { 
    containerCss: { height:'auto',width:'auto'}, 
    overlayClose: true 
  });
  e.preventDefault();
});
});
</script>

我更改了$ .modal（'

有什么建议吗？我真的想在所有模态需求上标准化simplemodal。

更新：我使用了Chris Heald的想法并为iframe simplemodal提出了这个想法。请注意，它根据内联高度和宽度设置容器大小以及iframe大小。

<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; margin:0 9px; padding-bottom:0; 
padding-top:10px">',
{closeHTML:"", overlayCss: {backgroundColor:"#000", opacity:85},
containerCss:{backgroundColor:"#B9B54F", borderColor:"#B9B54F", border:20, 
padding:10, height:'height_len+10', width:'width_len+10'}, overlayClose:true});
e.preventDefault();
});
</script>

Answer 1

我只是使用HTML5数据属性和jQuery的data（）方法。

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

然后在页面底部或$（文档）.ready（）部分：

<script>
  $(".modal").click(function(e) {
    var $this = $(this);
    $.modal({
      url: $this.attr("href"),
      width: $this.data("width"),
      height: $this.data("height"),
      animate: true,
      opacity: 60
    })
    e.stopPropagation();
    return false;
  })
</script>

您可以使用“模态”类标记任何元素，并提供数据宽度和数据高度属性，并将正确的Javascript行为附加到正确的元素。这样做的另一个好处是可以从不显眼的Javascript设计目标中获得正确，并且更容易维护。

如何使用onclick内联调用simplemodal？

1 个答案: