jQuery dialog popup

User

HTML

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Dialog - Default functionality</title>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
      <style>
      	.tip-btn{
      		display: inline-block;
		    background-color: #47bc17;
		    color: #fff;
		    padding: 10px;
		    cursor: pointer;
      	}
      </style>
   </head>
   <body>
      <br><br><br><br><br><br><br>
      <!-- 
		Note: 
		1. change the tip_id value : Example: [ tip_id=3 ] or [ tip_id=4 ] like that
		2. Get dynamic data [ see in console log ]
		3. Automatic jquery ui popup will be open.
		4. For dummy data link [ https://jsonplaceholder.typicode.com/] Dummy Data from server in json format

-->
      <center>
      	<h1>jQuery dialog popup</h1> <small>Note: Click again if pop up not showing</small><br><br>

<div class="opener_show_tip tip-btn"  width="365"  tip_id="2">Open Tip Button</div>
      </center>
      
      
      <div class="dialog_show_tip" style="display:none"></div>
      <script>
         //=========== [ Get Tip Id and another Value ]===========

$("body").on("click", ".opener_show_tip", function(){
          var this_opener=$(this);
          var tip_id=$(this).attr('tip_id');
          var width=$(this).attr('width');
          openTip(tip_id,this_opener,width); // call function tip
          return false;
         });
         
         // =============[  function define for Tip ] =============
         function openTip(tip_id,this_opener,width) {
         var tipId=tip_id; // assign tip id to variable
         
              // Adding 'click' event listener to button
          		$(".opener_show_tip").click(() => {
	          		$.ajax({
	                type: "GET",
	                url: "https://jsonplaceholder.typicode.com/todos/"+tipId, 
	                success: function(result) {
		             //conver Object to  Stringify to json
		             const myJSON = JSON.stringify(result);
	           
		             //Debugg code
		             console.log(myJSON);
           
	              	//set content in tip Model Body
	             	 $(".dialog_show_tip").html(result.title);
		             $(".dialog_show_tip").dialog({
		             	  autoOpen: true,
		                  show:{
		                      effect:'fade',
		                      duration:300
		                  },
		                  hide:{
		                      effect:'fade',
		                      duration:300
		                  },
		                  position:{
		                      my: 'center bottom',
		                      at: 'center top-10px',
		                      of: this_opener,
		                      offset: "10 2",
		                      collision: 'flip flip'
		                  },
		                  modal:true,
		                  title:result.id, //set content in tip Model Title
		                  dialogClass:'tip-dialog', 
		                  width: (typeof width !== "undefined" ? width : 300) + 'px',
		                  height:'auto'
	              	});               
         		}	
         	  });
          	});
         }
      </script>
   </body>
</html>

CSS

JavaScript