Question

请帮我找一个我发现的插件。它工作得很好，但我想稍微修改它，但我的javascript / jQuery知识基本上是零。

http://www.jqueryscript.net/demo/Responsive-Accessible-jQuery-Modal-Plugin-Popup-Overlay/

首先我做了这个更改jQuery(document).ready(function($)所以它适用于最新的jQuery版本，脚本设置为版本1.8.2 ..

我只想使用工具提示并制作一个简单的弹出/最大化图像工具。

这是我走了多远，我很惭愧地说，3个不眠之夜。

对于工具提示

<input class="my_tooltip_open" type="submit" value="Tooltip1"></input>
<div id="my_tooltip" class="well">
    <a href="#" class="my_tooltip_close" style="float:right;padding:0 0.4em;">×</a>
    <h4>Tooltip example 1</h4>
    <p>Tooltip content 1 will be positioned relative to the opening link.</p>
</div>

<input class="my_tooltip_open" type="submit" value="Tooltip2"></input>
<div id="my_tooltip" class="well">
    <a href="#" class="my_tooltip_close" style="float:right;padding:0 0.4em;">×</a>
    <h4>Tooltip example 2</h4>
    <p>Tooltip content 2 will be positioned relative to the opening link.</p>
</div>

这就是功能：

<script>
jQuery(document).ready(function($) {

    $("[id^=my_tooltip]").popup({
        type: 'tooltip',
        vertical: 'bottom',
        transition: '0.3s all 0.1s',
        tooltipanchor: $('.my_tooltip_open')
    });

});
</script>

我知道它看起来很愚蠢，我应该使用CLASS而不是ID，但这是我可以使它工作并显示工具提示的唯一方法。唯一的问题是它总是显示最后一个工具提示。

它应该在逻辑上看起来像这样。

 <input class="my_tooltip_open" type="submit" value="Tooltip1"></input>
    <div class="my_tooltip" class="well">
        <a href="#" class="my_tooltip_close" style="float:right;padding:0 0.4em;">×</a>
        <h4>Tooltip example 1</h4>
        <p>Tooltip content 1 will be positioned relative to the opening link.</p>
    </div>

    <input class="my_tooltip_open" type="submit" value="Tooltip2"></input>
    <div class="my_tooltip" class="well">
        <a href="#" class="my_tooltip_close" style="float:right;padding:0 0.4em;">×</a>
        <h4>Tooltip example 2</h4>
        <p>Tooltip content 2 will be positioned relative to the opening link.</p>
    </div>

<script>
    jQuery(document).ready(function($) {

      [SOMETHING MAGICAL HERE LIKE (this).next !??!]('.my_tooltip').popup({
            type: 'tooltip',
            vertical: 'bottom',
            transition: '0.3s all 0.1s',
            tooltipanchor: $('.my_tooltip_open')
        });

    });
    </script>

对于图像最大化和画廊部分我最终得到了这个

    <img src="img1.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />     
    <div id="my_popup">
    <img src="img1.jpg"/>  
<button class="my_popup_close">Close</button>
      </div>    
      <script>
    jQuery(document).ready(function($) {
          $('#my_popup').popup();
        });
      </script>

这就是我的目标：

 <img src="img1.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />     
    <img src="img2.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />   
  <img src="imgn.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />

  <script>
jQuery(document).ready(function($) {
      $('#my_popup').popup();
      (a wonderful thing called a close button somewhere on the right up.)
      (another magical thing called "next" and "prev button" if there are more pictures)
    });
  </script>

如果我点击下一个或上一个，它应该转到下一个或上一张图片（如果它们存在）。此功能已经存在于此插件中，如果您单击“淡入淡出”示例上的演示，则会在“下一个示例”中看到一个按钮。

我真的很喜欢这个插件，看起来非常快速和简单（对于谁知道javascript，我甚至无法正确使用它。）

我知道我要求很多帮助，但也许你可以指出我正确的方向。

提前感谢您的所有时间。

Answer 1

您需要将set popup更改为element。使用给定代码更改您的java脚本代码。

    jQuery(document).ready(function($) {

$（＆＃39; .my_tooltip＆＃39）。每一（功能（）{ $（本）.popup（{ 键入：＆＃39;工具提示＆＃39;，垂直：＆＃39;底部＆＃39;，过渡：0.3秒全部0.1秒＆＃39;， tooltipanchor：$（＆＃39; .my_tooltip_open＆＃39;） }）; }）; }）;

jQuery模态多个元素使用相同的类

1 个答案: