Можно по событию нажатие кнопки присваивать блоку какой-то класс, на который в CSS повесить нужные стили. CSS .modalDialog { position: fixed; overflow: auto; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; } .modalDialog > div { width: 700px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .modalDialog:target, .target { display: block; pointer-events: auto; } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } HTML <script src="http://code.jquery.com/jquery-latest.js"></script> <a href="#zakaz" class="buy" onclick="$('#zakaz').toggleClass('target');">Заказать</a> <div id="zakaz" class="modalDialog"> <div> <a href="#close" title="Закрыть" class="close"></a> <center><h2>Оформление заказа</h2></center> </div> </div> Если в проекте JQuery не используется, тогда можно самому написать на JS функцию-аналог toggleClass().