JSFiddle - React, Tailwind, and code Playground

by jmcausing

HTML

<div id="click"> CLICK ME </div>

	<div id="dialog"></div>

CSS

#click {
	background: yellow;
	text-align: center;
	width: 120px;
}

JavaScript

$(document).ready(function() { 

	$('#click').click(function () { 
		first_dialog();
	})
	
	function first_dialog() {
		var content = "This is my 1st Dialog Box - Please help me to have the BACK button functional";
		var title = "This is my title 1st";
		$('#dialog').attr('title', title).text(content).dialog({ buttons: 
			{ 'Continue': function() { 			// Button 'Ok'
					second_dialog();
				}
			}
		}); 	// position of dialog	
	}
	
	function second_dialog() {
		var content = "This is my 2st Dialog Box - Please help me to have the BACK button functional";
		var title = "This is my title 2st"; // THIS IS NOT WORKING
		$('#dialog').attr('title', title).text(content).dialog({ buttons: 
		{ 'YES': function() { 			// Button 'Ok'
			alert('Okay clicked!');
		}, 'No': function() { 		// Button 'Not OK'
			alert('Not Okay clicked');
		}, 'Back': function() {		// Button 'Very Ok'
			first_dialog();
		} }, 
			 closeOnEscape: true,  		// Dialog box settings - Escape to close
			 draggable: false, 			// Draggable = false
			 resizable: false, 			// Resize = false
			 show: 'fade', 				// Animation (example fade, bounce)
			 modal: true, 				// Overlay
			 position: [100, 100] 
		 }); 	// position of dialog
	}
})