为 jSquares 插件创建一个关闭按钮答案

【问题标题】：Create a close button for jSquares plugin为 jSquares 插件创建一个关闭按钮
【发布时间】：2012-08-03 14:36:37
【问题描述】：

我在这里使用这个插件：

http://boedesign.com/blog/2009/10/22/jsquares-for-jquery/

GitHub 链接 https://github.com/jboesch/jSquares/blob/master/js/jquery.jsquares.js

...脚本运行良好，但我真正需要的是创建一个关闭按钮，该按钮仅在将鼠标悬停在标题上时才会显示在标题内。

很明显，我不需要桌面网站的关闭按钮，因为它使用悬停，但我需要它才能在 iPad 上更好地工作。我们的解决方案基本上只是在其中有一个关闭按钮，供人们单击以手动关闭它。

任何帮助将不胜感激！

编辑 - 我在那里看到了这个，有没有一种简单的方法可以将它附加到标题内的按钮上？

.bind('mouseleave', function(){
    _fadeInOutImage('out', options.fade_start)
    $('#js-overlay-id-' + index).remove();
    }
);

【问题讨论】：

标签： jquery jquery-plugins custom-controls

【解决方案1】：

我找到了一个不错的方法。

添加此代码

$('.js-overlay-html .remove').bind('click', function(){
    _fadeInOutImage('out', options.fade_start)
    $('#js-overlay-id-' + index).remove();
    return false;
    }
);

紧随其后：

$('<div id="js-overlay-id-' + index + '">' + contents + '</div>')
    .css(caption_options)
    .addClass(options._overlay_selector_class)
    .appendTo('body')
    .bind('mouseleave',
    function(){
         _fadeInOutImage('out', options.fade_start)
    $('#js-overlay-id-' + index).remove();
    }
);

这似乎可以解决问题。

【讨论】：