Диалог jQuery: как использовать?

-1

Я изучаю, как использовать диалог jQuery. Одна ссылка, которую я нашел полезной, - http://imperavi.com/redactor/examples/uidialog/. Код указан ниже, но я не знаю, почему он не работает.Диалог jQuery: как использовать?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Test Dialog</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head> 
<body> 
    <p><a href="javascript:void(null);" onclick="showDialog();">Open</a></p> 

    <div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div> 

    <script type="text/javascript"> 
    function showDialog() 
    { 
     $("#dialog-modal").dialog(
     { 
     width: 600, 
     height: 400, 
     open: function(event, ui) 
     { 
      var textarea = $('<textarea style="height: 276px;">'); 
      $(textarea).redactor({ 
       focus: true, 
       autoresize: false, 
       initCallback: function() 
       { 
        this.set('<p>Lorem...</p>'); 
       } 
      }); 
     } 
     }); 
    } 
    </script> 
</body> 
</html>

Благодарим за помощь!

Диалог появляется после добавления jquery-ui и css, но «

Lorem ...

» не отображается.

Еще раз спасибо.

Еще одна вещь ... Можно ли передать строку в «showDialog», чтобы она отображала различный контент на основе другой ссылки? Например, добавив «Открыть 1» и «Открыть 2», чтобы показать другую строку?

Спасибо еще раз.

источник

2014-01-14 user180574

Dialog НЕ является частью стандартной библиотеки, но в JQuery UI! http://jqueryui.com/ Вы должны включить это тоже. И не забудьте взять тему, или она станет очень уродливой. http://jqueryui.com/themeroller/ – androidavid

... что означает, что вам нужно загрузить его отдельно. –

Я думаю, вы забыли добавить Jquery UI.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Test Dialog</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="path_to_jq_ui"></script> 

</head> 
<body> 
    <p><a href="javascript:void(null);" onclick="showDialog('Lorem ipsum dolor');">Open</a></p> 

    <div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div> 

    <script type="text/javascript"> 
    function showDialog(text) 
    { 
     $("#dialog-modal").html(text) 
     $("#dialog-modal").dialog(
     { 
     width: 600, 
     height: 400, 
     open: function(event, ui) 
     { 
      var textarea = $('<textarea style="height: 276px;">'); 
      $(textarea).redactor({ 
       focus: true, 
       autoresize: false, 
       initCallback: function() 
       { 
        this.set('<p>Lorem...</p>'); 
       } 
      }); 
     } 
     }); 
    } 
    </script> 
</body> 
</html>

Здесь работает скрипку: http://jsfiddle.net/bY3F4/3/

Скачать JqueryUI из here

Edit: Динамический диалог контент добавлен в код

источник

2014-01-14 20:58:29

Спасибо, но диалог пуст. Мне нужно увидеть «Lorem ...» в текстовой области. – user180574

Код обновлен на скрипке –

Спасибо за ваш очень быстрый ответ. Мое первоначальное мышление этого кода заключается в передаче строки showDialog, чтобы он мог показывать различный контент на основе другой ссылки. Например, добавив «Открыть 1» и «Открыть 2», чтобы показать другую строку. Я пытался в скрипке, но, очевидно, это не сработает. В любом случае? Еще раз спасибо. – user180574

Dialog является частью jQuery UI. Вы должны включить его также.

источник

2014-01-14 20:55:44 lxe

Диалог находится в пользовательском интерфейсе JQuery, вам требуется только JQuery. вставить это в начале:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

источник

2014-01-14 20:57:40

вам также понадобятся таблицы стилей, или это будет выглядеть ужасно :) –

правда, что :) Я просто хотел дать идею, но на самом деле я могу видеть, что другие тоже сделали :) –

Добавить JQuery UI стилей

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />

Добавить JQuery + JQuery UI

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

источник

2014-01-14 20:58:08

Диалог jQuery: как использовать?

ответ

Смежные вопросы