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

對話框不是標準庫，但JQuery的一部分UI！ http://jqueryui.com/ 你也必須包括這一點。不要忘記獲取主題，否則會變得非常難看。 http://jqueryui.com/themeroller/ – androidavid

...這意味着你需要單獨加載它。 –

我想，你忘了添加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> 
    <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

編輯：動態對話框的內容添加到代碼

來源

2014-01-14 20:58:29

謝謝，但對話框是空的。我需要在文本區域看到「Lorem ...」。 – user180574

代碼更新在小提琴 –

感謝您的快速響應。我最初的想法是將一個字符串傳遞給showDialog，以便它可以根據不同的鏈接顯示不同的內容。例如，添加「打開1」和「打開2」以顯示不同的字符串。我嘗試了小提琴，但顯然它不起作用。任何可能的方式？再次感謝。 – user180574

Dialog是jQuery UI的一部分。你也必須包含它。

來源

2014-01-14 20:55:44 lxe

Dialog是在JQuery UI中，你只需要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對話框：如何使用？

回答

相關問題