I want to show a another dialog box with same styling once button clicked on first dialog box using javascript

Question

I clicked login button when call if from a mobile screen, i ll display a dialog box with a continue button once user clicks it i ll show another content on same dialog box.

 $(document).on("click", "#btn", function() { var uagent = navigator.userAgent.toLowerCase(); if (true) { $(document).on("click", "#btn", function() { $('<div></div>').dialog({ modal: true, title: "Confirmation", classes: { 'ui-dialog-titlebar-close': 'hidden', }, open: function() { var markup = 'Hello World'; $(this).html(markup); }, buttons: { Ok: function() { $(this).dialog("close"); } } }); //end confirm dialog }); } else { alert('false'); }

Answer 1

Good Luck

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> //style all the dialogue $( function() { $(".dialog_help").dialog({ modal: true, autoOpen: false, width: 500, height: 300, dialogClass: 'ui-dialog-osx' }); }); //opens the appropriate dialog $( function() { $(".opener").click(function () { //takes the ID of appropriate dialogue var id = $(this).data('id'); //close dialogue $("#dialog_1").dialog("close"); //open dialogue $(id).dialog("open"); }); }); </script> <em class='opener' data-id='#dialog_1' style='cursor: pointer;'> Help 1</em> <div class='dialog_help' id='dialog_1' title='Dialog Box'> <p>Dialog Box 1</p> <em class='opener' data-id='#dialog_2' style='cursor: pointer;'> Help 2</em></p> </div> <div class='dialog_help' id='dialog_2' title='Dialog Box'> <p>Dialog Box 2</p> </div>