Question

我有几个模态弹出窗口都使用相同的设置。其中一个需要以下代码。

var $modal = $('#modal')
  .attr('id', 'modal')
  .css({zIndex: 3000});

$('#modal-trigger').click(function(evt) {
  evt.preventDefault(), $('#modal').css("visibility","visible");

  $(this).overlay({
    effect: 'fade',
    glossy: true,
    opacity: 0.8,
    closeOnClick: true,
    onShow: function() {
      $('body').append($modal);
    },
    onHide: function() {
      $modal.remove();
    },
  })
});

所以制作第二个意味着将模态更改为以下地方的其他内容：

var $ modal = $（'＃ modal '）

.attr（'id'，' modal '）

$（' #modal-trigger '）。click（function（evt）{

$（ '主体'）附加（的 $模态）;

$模态卸下摆臂（）;

有没有办法缩短这个，所以我不必继续添加完整的代码来实现这个效果？

Answer 1

编写一个jQuery插件。这很简单。 http://docs.jquery.com/Plugins/Authoring

那就是说，看起来你可能会重新实现像jQuery blockUI这样的东西。

BTW，没有理由按ID选择元素并立即设置其ID属性，因为这行代码确实如此：

$('#modal').attr('id', 'modal')

Answer 2

我建议：

缓存元素（使用您创建的变量），
在回调中使用函数（传递“context”和单击触发器时要受影响的元素，
未指定已分配的内容（#modal您正在选择已有id="modal"的内容，

它看起来像那样（但它尚未经过测试）：

var $modal1 = $('#modal1').css({zIndex: 3000});
var $modal2 = $('#modal2').css({zIndex: 3000});

var doStuff = function(context, element){
  element.css("visibility","visible");
  context.overlay({
    effect: 'fade',
    glossy: true,
    opacity: 0.8,
    closeOnClick: true,
    onShow: function() {
      $('body').append(element);
    },
    onHide: function() {
      element.remove();
    },
  })
}

$('#modal1-trigger').click(function(evt){
    evt.preventDefault();
    doStuff($(this), $modal1);
});

$('#modal2-trigger').click(function(evt){
    evt.preventDefault();
    doStuff($(this), $modal2);
});

如果您发现任何错误，请与我们联系。

Answer 3

让它成为一种功能？我认为这应该有效：

function doStuff(id)
{
    var $modal = $('#' + id)
  .attr('id', id)
  .css({zIndex: 3000});

$('#' + id + '-trigger').click(function(evt) {
  evt.preventDefault(), $('#' + id).css("visibility","visible");

  $(this).overlay({
    effect: 'fade',
    glossy: true,
    opacity: 0.8,
    closeOnClick: true,
    onShow: function() {
      $('body').append($modal);
    },
    onHide: function() {
      $modal.remove();
    },
  })
});
}

缩短jquerycode的方法

3 个答案: