jQuery addClass example

Change class name on click in jQuery

by Leonardo Lo Presti

HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<button id="opener">Open Dialog</button>

<div id="new_dialog_area"></div>

JavaScript

$(function() {

  function makedialog(){
     var htmlData = '<div id="dialog" title="Basic dialog">';
       htmlData += '<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the \'x\' icon.</p>';
       htmlData += '</div>';
       $('#new_dialog_area').html(htmlData);
  }

//  $('#opener').on('click', function(){
  $(document).on('click', '#opener', function(){
    makedialog();
   $("#dialog").dialog({
    autoOpen:false,
   });
   $("#dialog").dialog("open");
 });

});