display modal jquery by click

Question

How can I display my jQuery modal by click on an image ? Look at this :

Actually I'm trying to display a JQplot chart in an modal box. With click on image , the box should display

On the same page..

<div id="dialog" title="Basic dialog">
 <div id="chart1" style= "width:40%;height:200px"> </div>
</div>
<img id="imgg" src = "stats_matching/gprier.gif" alt = "perso">


  <script>
  $(document).ready(function(){
    $.jqplot.config.enablePlugins = true;
    var s1 = [2, 6, 7, 10];
    var ticks = ['a', 'b', 'c', 'd'];

    plot1 = $.jqplot('chart1', [s1], {
        // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
        animate: !$.jqplot.use_excanvas,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
        },
        highlighter: { show: false }
    });

});     

        $("#dialog").hide();
        $('#imgg').click(
            function() {
                $(this).data('clicked',true);
            }
        );

        if($('#imgg').data('clicked')) {
                console.log('refefez');
                $("#dialog").show().dialog();

        }


  </script>

Answer 1

You need to have a function that listen to the change of data attribute.

  ` $(document).on('data-attribute-changed', function() {
       if($('#imgg').data('clicked')) {              
            $("#dialog").show().dialog();

        }         
  });`

Thanks, Charles.