jQuery addClass example

Change class name on click in jQuery

by Алексей Касьян

HTML

<div class="link-page">
  <a class="fancybox" href="#pop_up">Ссылка для открытия окна</a>
</div>

<div id="pop_up" class="pop_up hidden">
		<div class="logo">
			
		</div>
		<div class="popup-items-flex">
			<div class="col-7-item-popup">
				<div class="shema-apartment-block">
					<div class="shema-apartment-parents">
						<div class="shema-apartment-img-block">
							<div class="shema-apartment-img">
								
							</div>
							<div class="upper-layer-shema-apart">
								<a data-button="1" href="#pop_shema" class="fancybox upper-layer-item upper-layer-item1"></a>
							</div>
						</div>
						
					</div>
				</div>
				<div class="block-stamp">
					<button data-fancybox-print class="link-stamp fancybox-button--print" type="button">Печать</button>
				</div>
			</div>
			<div class="col-5-item-popup">
				<h3 class="title-page">Литер 2, подъезд 1, Этаж №7</h3>
				<div class="info-content-block">
					<div class="list-block-content">
						<h6 class="title-popup">Легенда:</h6>
						<ul class="list-content">
							<li class="style-icon-1">Студии</li>
							<li class="style-icon-1">1-комнатные квартиры</li>
							<li class="style-icon-2">2-х комнатные квартиры</li>
							<li class="style-icon-3">3-х комнатные квартиры</li>
						</ul>
					</div>
					<div class="img-content-block">
						<div class="img-content" style="background-image: url('img/street.png')"></div>
					</div>
				</div>
				<form id="form2" class="form-popup">
					<h5 class="title-form-popup">Узнайте стоимость, позвонив на <a href="tel:+79726723823">+7-972-67-238-23</a> или напишите нам:</h5>
					<div class="form-popup-flex">
						<div class="input-item col-50-input">
							<label class="label-input-form">Ваше имя *</label>
							<input class="input-form" type="text" name="name">
						</div>
						<div class="input-item col-50-input">
							<label class="label-input-form">Ваш телефон</label>
							<input class="input-form" type="tel"...

CSS

.link-page a{
    color: #692c2b;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
}
.pop_up {
    width: 1100px;
    border-radius: 9px;
    padding: 15px 0 18px 0;
    margin: 0;
}
.popup-items-flex {
    display: flex;
    flex-wrap: wrap;
    padding: 17px 14px 44px 14px;
}
.col-7-item-popup {
    width: 60%;
    padding-right: 33px;
}
.col-5-item-popup {
    width: 40%;
}
.fancybox-close-small {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 21px;
    height: 21px;
    padding: 0;
    outline: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    z-index: 10;
    cursor: pointer;
    background-image: url(../img/close.png);
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
}
.title-popup {
    color: #000000;
    font-size: 23px;
    line-height: 25px;
    font-weight: 700;
}
.pop_up .logo {
    padding-left: 14px;
}
.list-content {
    font-size: 14px;
    line-height: 17px;
    color: #1b1b1b;
    margin-top: 20px;
}
.list-content li {
    position: relative;
    padding-left: 54px;
    margin-bottom: 16px;
}
.list-content li:last-child{
    margin-bottom: 0;
}
.list-content li::before, .list-content li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
    width: 25px;
    height: 25px;
    border: 2px solid #a0a0a0;
    border-radius: 50%;
}
.list-block-content {
    width: 157px;
    margin-right: 25px;
}
.list-content li::after{
    left: 20px;
    z-index: 2;
}
.list-content li.style-icon-1::before{
    background-color: #faebc0;
}
.list-content li.style-icon-1::after{
    background-color: #fcf4df;
}


.list-content li.style-icon-2::before{
    background-color: #e1ecef;
}
.list-content li.style-icon-2::after{
    background-color: #edf2f5;
}


.list-content li.style-icon-3::before{
    background-color: #d9e5ac;
}
.list-content li.style-icon-3::after{
    background-color:...

JavaScript

$( '.fancybox' ).fancybox({
      toolbar : true,
      smallBtn : false,
      buttons : [
        'print',
        'close'
      ]
    });

    $('body').on('click', '[data-fancybox-print]', function() {
      function printElement(e) {
        var ifr = document.createElement('iframe');
        ifr.style='height: 0px; width: 0px; position: absolute'
        document.body.appendChild(ifr);

        $(e).clone().appendTo(ifr.contentDocument.body);
        ifr.contentWindow.print();

        ifr.parentElement.removeChild(ifr);
      }

      var instance = $.fancybox.getInstance();
      if (instance) {
        printElement(instance.current.$content)
      }
    });