Question

对你们来说可能很明显，但对我来说却不是。

我想创建一个i帮助图片，点击它后会弹出一个包含信息的窗口。

我尝试过这样的事情，但没有帮助：

<a id="dialog-1" href="#"><button id="opener" >i</button></a>

<script>
     $(function() {
        $( "#dialog-1" ).dialog({
           autoOpen: false,  
        });
        $( "#opener" ).click(function() {
           $( "#dialog-1" ).dialog( "open" );
        });
     });
</script>

的application.js

//= require jquery
//= require jquery_ujs
//= jquery-ui
//= require turbolinks
//= require_tree .

Answer 1

有许多方法可以满足您的需求。我会提出一个建议，可能有其他方法，但这很简单。

对于＆＃34; i＆＃34;图片，我建议你得到一个实际的图像，更好的透明背景png。另一种选择是使用标志性字体，例如Font Awesome（example）。它看起来像一个图像，但它被视为一个字体，所以你可以改变颜色，大小等。

弹出窗口。单个选项是创建一个具有绝对定位的隐藏div，并使用javascript / jQuery打开它，并且可能会略微淡化背景。你可以稍微谷歌，并找到许多解决方案，一个将满足你的需要肯定。

作为第二个改进：如果内容非常繁重，您可能希望通过AJAX或其他异步方式按需加载它，但首先让信息窗口工作：）

Answer 2

也许你错过了$( document ).ready(function() { ... });

试试这个：

<a id="dialog-1" href="#"><button id="opener" >i</button></a>

<script>
     $(function() {
        $( document ).ready(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
     });
</script>

Answer 3

从我的评论中回答

您是否包含了库jquery-ui？

在您的application.js文件中包含jquery-ui库。

如何在Rails中创建我的帮助按钮

3 个答案: