これ欲しい:
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>
何も起こらなかった
div.thedialog
の代わりに、div#thedialog
を指定します。 .
はクラス名とともに使用され、#
はIDを操作するときに使用されます。
(また、これが実際に使用したコードである場合は、角かっこがありません:))
作業コード:
<!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スクリプトも、上記のようにページにリンクする必要があります(ex <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:読んでください この本 あなたがインターネットで見るすべてのそのクールなことをする方法を学びたいなら。