dialóg jQuery skoky dole na stránke - javascript, jquery, html, css

Používam jQuery na vytvorenie vlastnéhopopUp podobný tutoriálu / tipu pre koncového používateľa (ktorý môže byť v prehliadači Chrome ALEBO v inom prehliadači). Ako však vidíte na obrázku nižšie, prvky div, ktoré obsahujú môj kód, majú veľkú hornú časť, ktorá tlačí môj kód dole. Pri používaní vývojárskych nástrojov prehliadača Chrome som si všimol, že by -591px bolo, aby sa vyskakovacie okno zobrazilo tam, kde chcem, takže som použil nasledujúci kód:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" />
<script>
function myFunction() {

$(function () {
$("#something").dialog();
});

$("#something").dialog({
top:-591
});
}
</script>

<div id="something"  style="resize:both; display:none; background-color:yellow; height: 200px; width:200px;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed.</p>
</div>

Skúšal som niekoľko odpovedí z tento odkaz ale nepracovali. Tiež som si všimol, že keď komentujem prvý riadok skriptu (jquery-2.1.11.min.js), prestane fungovať, takže to môže mať súvislosť s touto verziou jQuery?

Tu je snímka obrazovky z nástrojov pre vývojárov prehliadača Chrome:

odpovede:

Problém je v tom, že ste pridali js namiesto pridania znova CSS

Zmeňte ho na jquery-ui.css

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

DEMO