jQuery модальное диалоговое окно onclick?
Я хочу это:
http://jqueryui.com/demos/dialog/#modal-message
к произошедшему, когда Вы нажимаете на ClickMe.
как сделать это?
Your files have downloaded successfully into the My Downloads folder.
Currently using 36% of your storage space.
Clickme
ничто happends
3 ответа
Вместо 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>
Используя диалоговое окно jQuery UI , в $ (document) .ready (...) выполните:
$('div.thedialog').dialog({ autoOpen: false })
для создания диалоговое окно и
$('#thelink').click(function(){ $('div.thedialog').dialog('open'); });
, чтобы открыть его.
@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.js - это файл сценария (в той же папке, что и файл html).
Теперь в script.js вы пишете
$(document).ready(function(){
$('div.thedialog').dialog({ autoOpen: false })
$('#thelink').click(function(){ $('div.thedialog').dialog('open'); });
});
PS: Прочтите эту книгу , если хотите узнать, как делать все те крутые штуки, которые вы видите в Интернете.