JSFiddle - React, Tailwind, and code Playground

by Md Shah

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<p>
        Visitor's Name : <input type="text" id="txtPageName" value="Shah" />
    </p>
    <p>
        <input type="button" id="dtbPop" value="Edit" />
    </p>

    <div id="oForm" style="display:none">
        
        <p>
            Your Name Is : <input type="text" id="txtPopName" value="" />
        </p>

        <input id="btnPopUpOk" type="button" value="Ok" />
    </div>

JavaScript

$(function () {

          var actualName = $('#txtPageName').val();

          $('#dtbPop').click(function (e) {

              $("#oForm").dialog();

              $('#txtPopName').val($('#txtPageName').val());
          });

          $("#btnPopUpOk").click(function (e) {

              $("#oForm").dialog("close");

              if (actualName != $('#txtPopName').val()) {

                  var resp = confirm("Body Content Might be changed, do you want to change in parent window ?");

                  if (resp) {

                      actualName = $('#txtPopName').val();
                      $('#txtPageName').val(actualName)
                  }
              }
          });
      });