Изображение onclick диалоговое окно?

Question

Я пытаюсь получить изображение (политика cookie), которое после щелчка отображает диалоговое окно с сообщением о том, что файлы cookie используются на этом веб-сайте. Я надеялся использовать диалоговое окно jQuery, но это кажется трудным.

Демо ссылка: http://myfirststepsto.weebly.com/

JQuery Я хотел бы использовать: http://jqueryui.com/dialog/#default

<div id="oneout"> 
<span class="onetitle"> 

</span> 
<div id="oneout_inner"> 
<centre> 

<img src="https://dl.dropboxusercontent.com/u/89687987/mycookie.png" alt="cookie policy" /> 
</a> 

<br></center></div></div> 

Answer 1

Я сделал скрипку для вас надеюсь, что это помогает! jsFiddle here

HTML:

<div id="oneout"> 
    <span class="onetitle"></span> 
    <div id="oneout_inner"> 
     <center> 
      <a><img id="opener" src="https://dl.dropboxusercontent.com/u/89687987/mycookie.png" alt="cookie policy" /></a> 
      <br> 
     </center> 
    </div> 
</div> 
<div id="dialog" title="Basic dialog"> 
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 

Javascript:

$(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     show: { 
      effect: "blind", 
      duration: 1000 
     }, 
     hide: { 
      effect: "explode", 
      duration: 1000 
     } 
    }); 
    $("#opener").click(function() { 
     $("#dialog").dialog("open"); 
    }); 
});