如何使用onclick内联调用simplemodal? [英] How to invoke simplemodal with onclick inline?

问题描述

我可以稍微使用Eric Martin的simplemodal.但我想将其与 onclick 内联.

I can use Eric Martin's simplemodal somewhat. But I would like to call it inline with 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"内联完成，也许可以调用具有合理默认值的类(即，没有高度和宽度以及文字网址的类).

Can anybody tell me how to do this. I read the docs, but it's not clear to me. Perhaps this shouldn't be done entirely inline with "onclick", maybe a class with sensible defaults could be invoked (i.e. a class without height and width and literal url).

我之前在一个用于处理图像的simplemodal脚本中有一篇相关的帖子给出:

I have a previous related post at one simplemodal script to handle images which gives:

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

and I changed $.modal('

Any suggestions? I would really like to standardize on simplemodal for all my modal needs.

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

Update: I used Chris Heald's idea and came up with this for iframe simplemodal. Note that it sets the container size as well as the iframe size, based on inline height and width.

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

推荐答案

我只是通过HTML5数据属性和jQuery的data()方法使用它.

I'd just use this using HTML5 data attributes, and jQuery's data() method.

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

然后在页面底部或$(document).ready()部分中:

Then at the bottom of the page, or in a $(document).ready() section:

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

您可以仅使用模态"类标记任何元素，并提供data-width和data-height属性，并且将正确的Javascript行为附加到正确的元素上.这样做有一个额外的好处，就是可以从不引人注意的Javascript设计目标中做到正确，并且更易于维护.

You can just tag any element with a "modal" class, and provide data-width and data-height attributes, and the correct Javascript behaviors are attached to the correct elements. This has the added benefit of being correct from the unobtrusive Javascript design goal, and is just easier to maintain.

这篇关于如何使用onclick内联调用simplemodal?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！