jQuery addClass example

Change class name on click in jQuery

by ian_smithz

HTML

<script src="https://scottaohara.github.io/accessible_modal_window/assets/js/aria.modal.min.js"></script>
        <div id="modal_1" data-modal data-modal-class="test-class">
          <h2>
            Auto-loaded test 1
          </h2>

          <div>
            <p>
              This dialog will open automatically if the URL fragment "#modal_1" is present.
            </p>
            <p>
              If a URL contains the ID of a dialog, this method will take precedent over other auto-loading methods.
            </p>
          </div>
        </div>
        
        
        
        
        
        
        <style>
        
        *,*:after,*:before{font-family:arial;}
*{margin-top: 0;}
header,main,footer {display: block; /* IE */}
*:focus{outline: 2px solid #921c2b; outline-offset: 2px; text-decoration: none;}
body,html{background:#fafafa;color:#450c13;font-size:20px;line-height:1.3;margin:0;padding:0;}
.content-area{padding:20px;margin:auto; max-width:680px;}
button{border:1px solid transparent; margin:0;}
a{color:#921c2b}
.btn, [role="button"]{background:#921c2b;border:1px solid #4d0912;color:#fff;cursor:default;display:inline-block;font-size:.825em;line-height:1;margin-bottom:12px;padding:16px 24px;position:relative;text-align:center;transition:transform .2s, background .2s; text-decoration: none}
.btn:hover,.btn:focus, [role="button"]:hover, [role="button"]:focus{background:#c12f48;}
label{display:inline-block;font-size:.75em;font-weight:bold;margin-bottom:.5em}
input[type="text"]{border:1px solid #333;display:block;font-size:1.4em;margin-bottom:1em;min-width:230px;padding:.5em;width:100%}
label{margin-top:1.125em}
/** demo styles */
a.at-only:focus { background: white; padding: 8px;position: fixed; }
fieldset { margin: 1.25em 0; }
legend { margin: 0; padding: 0; }
legend h2 { font-size: 1em; margin: 0; }
/* was causing a weird page jump. just hide it */
body > .at-only[inert] { display: none; }
details { margin: 1.25em 0; }
summary { cursor:...

CSS

*,*:after,*:before{box-sizing:border-box;}

/**
 * Including the at-only style with the dialog CSS as it is required
 * to visually hide a dialog's heading if desired.
 */
.at-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; width: 1px;
}

/**
 * Trigger styling
 */
[data-modal-open][hidden] {
  display: none;
}

/**
 * When a modal dialog is open, don't allow scrolling of content
 * beneath (on desktop). Also useful in negating instances of
 * double scroll bars.
 * (browser window + dialog if long enough content)
 */
body.modal-open {
  overflow: hidden;
}

/**
 * Modal Dialog base styling
 */
.js [data-modal],
.a11y-modal {
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 2px solid;
  bottom: 0;
  box-shadow: 0 0 1800px 400px rgba(0,0,0,.4);
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 660px;
  opacity: 1;
  overflow: auto;
  padding: 1.25em;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateY(0%);
  visibility: visible;
  width: 100%;
  z-index: 10; /* this should be more than enough... */
}

@media screen and ( min-height: 440px ) and ( min-width: 500px ) {
  .js [data-modal],
  .a11y-modal {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  }
}


/**
 * To allow for CSS animations, hidden modal dialogs are
 * not set to display: none, but rather the following rule
 * set, in combination with the dialog's default
 * position: fixed, will keep dialogs hidden from
 * all users until opened.
 *
 * This also solves an issue with iOS VO + Safari not allowing
 * modal dialogs to be focused, if the dialog is initially
 * set to "display: none".
 */
.js [data-modal][hidden]
.a11y-modal[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15vh);
  visibility: hidden;
}

.a11y-modal__close-btn...

JavaScript

/**
 * This script is for the skip link and to ensure that moving focus
 * via hashchange is respected in all browsers.
 */
window.addEventListener("hashchange", function( e ) {

	if ( location.hash.substring(1) !== '' ) {
  	var el = document.getElementById(location.hash.substring(1));

	  if ( el ) {
	    if ( !/^(?:a|select|input|button|textarea)$/i.test( el.tagName ) ) {
	      el.tabIndex = -1;
	    }
	    el.focus();
	  }
	}
}, false);