jquery модальное диалоговое окно onclick? - PullRequest
Новая
       8

jquery модальное диалоговое окно onclick?

10 голосов
/ 01 марта 2010

Я хочу это:

http://jqueryui.com/demos/dialog/#modal-message

происходит при нажатии на ClickMe.

как это сделать? 

<script type="text/javascript">
$(document).ready(function() {
$('div.thedialog').dialog({ autoOpen: false })
$('#thelink').click(function(){ $('div.thedialog').dialog('open'); });
}
    </script>
</head>
<body>
<div id="thedialog" title="Download complete">
    <p>
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        Your files have downloaded successfully into the My Downloads folder.
    </p>
    <p>
        Currently using <b>36% of your storage space</b>.
    </p>
</div>
<a href="#" id="thelink">Clickme</a>

ничего не происходит

Ответы [ 3 ]

13 голосов
/ 01 марта 2010

Вместо div.thedialog укажите div#thedialog. . используется с именами классов, а # используется при работе с идентификаторами.

(Кроме того, если вы использовали именно тот код, в котором отсутствовала скобка :))

Рабочий код: 

<!doctype html>
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
$(document).ready(function() {
$('div#thedialog').dialog({ autoOpen: false })
$('#thelink').click(function(){ $('div#thedialog').dialog('open'); });
})
    </script>
</head>
<body>
<div id="thedialog" title="Download complete">
    <p>
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        Your files have downloaded successfully into the My Downloads folder.
    </p>
    <p>
        Currently using <b>36% of your storage space</b>.
    </p>
</div>
<a href="#" id="thelink">Clickme</a>
</body>
0 голосов
/ 01 марта 2010

@ Azzyh Я думаю, что @Rune означает, что вы должны сделать для него скрипт.

Вы помещаете это в тег вашего HTML 

<script src="script.js" type="text/javascript"></script>

(также вам необходимо иметь скрипт JQuery-ui и JQuery, слишком связанный с вашей страницей, как показано выше (например, <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js" type="text/javascript"></script>) <- в случае, если он загрузит скрипт интернета). </p>

Где script.js - это файл скрипта (в той же папке, что и файл html).

Теперь в script.js вы пишете 

$(document).ready(function(){
   $('div.thedialog').dialog({ autoOpen: false })
   $('#thelink').click(function(){ $('div.thedialog').dialog('open'); });
});

PS: Прочитайте эту книгу , если вы хотите научиться делать все эти интересные вещи, которые вы видите в Интернете.

0 голосов
/ 01 марта 2010

Использование jQuery UI Диалог, в $(document).ready(...) do: 

$('div.thedialog').dialog({ autoOpen: false })

для создания диалога и 

$('#thelink').click(function(){ $('div.thedialog').dialog('open'); });

чтобы открыть.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...