jQuery модальный диалог onclick?

Я хочу это:jQuery модальный диалог onclick?

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>

ничего не happends

источник

2010-02-28 Karem

Вместо 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>

источник

2010-02-28 23:46:15 madaboutcode

+1 просто не забудьте включить таблицу стилей, ее внешний вид лучше :) –

@Alex обновил ответ с помощью таблицы стилей. – madaboutcode

Используя jQuery UI диалог, в $(document).ready(...) сделать:

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

создать диалог и

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

, чтобы открыть его.

источник

2010-02-28 23:06:55 Rune

Doesnt работа .. у меня есть это: Clickme, а затем эти две строки в документе готовы, а затем поле div, называемое «thedialog», но оно не работает – Karem

@ 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>) < - в случае, когда он загружает сценарий интернета).

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

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

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

PS: Читайте this book, если вы хотите узнать, как сделать все, что интересный материал, который вы видите в Интернете.

источник

2010-02-28 23:25:44 storedope

jQuery модальный диалог onclick?

ответ

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