CODEWITHSUNDEEP
dialogjquery-ui-dialog
Main
Main

Reputation: 1842

How to open Jquery UI dialog with image and text

I am novice in JQuery UI. I am trying code for opening jquery dialog with image and text from existing code in one of div tags. My code is

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script>
$(document).ready(function(){
  $(".peter_pic").click(function(){
    $( ".peter" ).dialog( "open" );
  }); 
  $( ".peter" ).dialog({ autoOpen: false });
});
 $( window ).load(function() {
        $(".peter").hide();
    });
</script>

<div class="Table" style="display: table;" >
<div style="display: table-row;">
<div style="display: table-cell;" class = "test">
<img class = "peter_pic" src="someimage.jpg" />
<div data-role="popup" class="peter">
Display some text. Display some text. Display some text.
</div>
</div>
</div>
</div>

Upvotes: 1

Views: 1130

Answers (1)

Main
Main

Reputation: 1842

I figured out on my own about the solution.

I added multiple img tag. This solved the problem.

<div class="Table" style="display: table;" >
<div style="display: table-row;">
<div style="display: table-cell;" class = "test">
<img class = "peter_pic" src="someimage.jpg" />
<div data-role="popup" class="peter">
<img class = "peter_pic" src="someimage.jpg" />
Display some text. Display some text. Display some text.
</div>
</div>
</div>
</div>

Upvotes: 1

Related Questions