Как создать кнопку справки в Rails

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

Ответ из моих комментариев

Вы включили библиотеку jquery-ui?

включить jquery-ui Библиотека в вашем файле application.js.

Answer 2

maybe you miss the $( 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

Есть много способов сделать то, что вам нужно. Я сделаю предложение, возможно, есть другие способы, но это нечто простое.

Для изображения "я" я рекомендую получить реальное изображение, лучше png с прозрачным фоном. Другой вариант - использовать иконический шрифт, такой как Font Awesome ( пример). Он выглядит как изображение, но обрабатывается как шрифт, поэтому вы можете изменить цвет, размер и т. Д.

Для всплывающих окон. Единственный вариант - создать скрытый элемент div с абсолютным позиционированием и открыть его с помощью javascript/jQuery и, возможно, немного затенить фон. Вы можете немного погуглить и найти множество решений, одно наверняка подойдет вам.

Второе улучшение: если контент очень тяжелый, вы можете загрузить его по требованию через AJAX или другими асинхронными способами, но сначала заставьте информационное окно работать:)