modalne okno dialogowe jquery onclick?

Chcę to:modalne okno dialogowe jquery onclick?

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

się stało po kliknięciu na ClickMe.

jak to zrobić?

<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>

nic happends

Źródło

2010-02-28 Karem

Zamiast div.thedialog, dać div#thedialog. . jest używany z nazwami klas, a # jest używany, gdy pracujesz z ids.

(Również, jeśli jest to rzeczywisty kod został użyty, nie było brakuje wspornik :))

Kodeks pracy:

<!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>

Źródło

2010-02-28 23:46:15 madaboutcode

+1 po prostu nie zapomnij dołączyć arkusza stylów, wygląda lepiej :) –

@Alex zaktualizował odpowiedź arkuszem stylów. – madaboutcode

Korzystanie dialogowe jQuery UI w $(document).ready(...) zrobić:

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

stworzyć dialog i

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

aby go otworzyć.

Źródło

2010-02-28 23:06:55 Rune

robi praca .. mam to: Clickme a następnie te dwie linie w gotowym dokumencie, a następnie w polu div o nazwie "thedialog", ale nie zadziała – Karem

@Azzyh Coś, że @Rune oznacza, że musisz zrobić dla niego scenariusz.

umieścić to w tagu kodu HTML

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

(również trzeba mieć skrypt jquery-ui i skrypt jQuery zbyt powiązany ze stroną z jak przetarte powyżej (ex <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js" type="text/javascript"></script>) < - w przypadku czarownic ładuje skrypt z Internetu).

Gdzie skrypt.js jest plikiem skryptu (w tym samym folderze, co plik HTML).

Teraz w script.js piszesz

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

PS: Przeczytaj this book jeśli chcesz nauczyć się robić wszystko, co fajne rzeczy można zobaczyć w internecie.

Źródło

2010-02-28 23:25:44 storedope

modalne okno dialogowe jquery onclick?

Odpowiedz

Powiązane problemy