圖片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"); 
    }); 
});