JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
     <h4>
        <a href="#" >AAAA </a> 
    </h4> 
    <img src="AAAA.jpg" />
    <div class="dialog" title="AAAA" >text
    </div>
</div>

CSS

.ui-widget-overlay {
    opacity: 0.7;
    background-color: #000000;
}

JavaScript

$("a").click(function(event) 
{
  $(this).parent().parent().children(".dialog").dialog(
  {
      width: 600,
      modal: true,
      close: function( event, ui ) {
          $(this).dialog('destroy');
      },
      open: function(event, ui) {
          $('.ui-widget-overlay')
          .bind('click', 
                function() { 
                    $(".dialog").dialog('close'); });
      }
  });
});