Добрый вечер! Я пишу сайт для стоматологического кабинета, и у меня случился конфликт между каруселью, связанными выпадающими списками и модальным окном.
Файл stomkab-main.html (скрипт карусели в конце кода):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Студия современной стоматологии |</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="shortcut icon" href="images/toothdoctor_diente_10728.ico" type="image/x-icon"> <link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/form-style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/window-style.css" type="text/css" media="all"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/roundabout.js" type="text/javascript"></script> <script src="js/roundabout_shapes.js" type="text/javascript"></script> <script type="text/javascript" src="selects.js"></script> <!--[if lt IE 7]><script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script><![endif]--> <!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]--> </head> <body> <div class="page-wrapper"> ... <!--Карусель--> <aside> <div class="main"> <a href="#" class="btnPrev"><img src="images/button-1.png" alt=""></a><a href="#" class="btnNext"><img src="images/button-2.png" alt=""></a> <div id="carousel"> <ul id="myRoundabout"> <li><img src="images/1307777.jpg" alt="" /></li> <li><img src="images/news_file_24_l.jpg" alt="" /></li> <li><img src="images/stomat-03.jpg" alt="" /></li> <li><img src="images/Untitled-6.jpg.6d243a94d32c96a062ba4d3e399b24f0.jpg" alt="" /></li> <li><img src="images/80414_content_Вэладент_улыбайся.jpg" alt="" /></li> <li><img src="images/5d0eda80b4c8fd12548c50b746e50a5a.jpg" alt="" /></li> <li><img src="images/akciya-plastinochnyj-protez-2e319f0a7265b99e24824ce68036675e.jpg" alt="" /></li> </ul> </div> </div> </aside> ... <!--Форма записи пациента к врачу--> <div class="container" id="yak1"> <form id="InsertForm" action="#" method="POST" class="checkout"> <div class="checkout-header"> <h1 class="checkout-title"> Записаться на приём <span class="checkout-price">GO!</span> </h1> </div> <p> <input type="text" name="surname" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{2,30}" placeholder="Фамилия" title="Введите фамилию на русском языке, от 2 до 30 букв без пробелов" maxlength="30" required> <input type="text" name="name" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{2,30}" placeholder="Имя" title="Введите имя на русском языке, от 2 до 30 букв без пробелов" maxlength="30" required> <input type="text" name="patronymic" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{7,30}" placeholder="Отчество" title="Введите отчество на русском языке, от 7 до 30 букв без пробелов" maxlength="30" required> <input type="text" name="nomer_telefona" size="30" class="checkout-input checkout-name" pattern="\+([0-9]{1,3})(\([0-9]{2,5}\))([0-9]{5,7})" placeholder="Номер телефона" title="Введите номер телефона в формате +<код страны>(<код региона/оператора>)<номер телефона> без пробелов. Код страны содержит от 1 до 3 цифр, код региона/оператора - от 2 до 5 цифр, а номер телефона - от 5 ддо 7 цифр" maxlength="30" required> </p> <p> <input type="text" name="pochta" size="80" class="checkout-input checkout-name" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="E-mail" title="Введите адрес электронной почты в формате <имя_пользователя>@<Название_сайта>.<домен_государства> без пробелов. Имя пользователя и название сайта содержат не менее 1 символа, а домен государства - от 2 до 8 букв" maxlength="80" required> <select name="med_spec" id="med_spec" class="checkout-input checkout-name" required> <option value="0">Выберите область медицины</option> <option value="1">Терапия</option> <option value="2">Хирургия</option> <option value="3">Ортопедия</option> <option value="4">Ортодонтия</option> <option value="5">Пародонтология</option> </select> <select name="services" id="services" class="checkout-input checkout-name" disabled required> <option value="0">Выберите услугу</option> </select> <select name="doctors" id="doctors" class="checkout-input checkout-name" disabled required> <option value="0">Выберите врача</option> </select> </p> <p> <input type="text" name="data_priema" class="checkout-input checkout-name" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="Дата приёма" title="Введите дату приёма пациента в формате <ГГГГ>-<ММ>-<ДД> без пробелов" maxlength="10" required> <select name="vremya_priema" class="checkout-input checkout-name" required> <option>Выберите время приёма</option> <option value="08:00">8:00</option> <option value="08:49">8:49</option> <option value="09:38">9:38</option> <option value="10:27">10:27</option> <option value="11:16">11:16</option> <option value="12:05">12:05</option> <option value="13:43">13:43</option> <option value="14:32">14:32</option> <option value="15:21">15:21</option> <option value="16:10">16:10</option> <option value="16:59">16:59</option> <option value="17:48">17:48</option> <option value="19:26">19:26</option> </select> </p> <p> <input type="submit" value="Записаться" class="checkout-btn"> </p> </form> </div> ... </div> ... <!--Модальное окно--> <div class="modal-wrapper"> <div class="modal"> <div class="head"> <a class="btn-close trigger" href="#"> <i class="fa fa-times" aria-hidden="true"></i> </a> </div> <div class="content"> <div class="good-job"> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <h1></h1> </div> </div> </div> </div> ... <!--Скрипт карусели--> <script type="text/javascript"> // <![CDATA[ $(document).ready(function() { $('ul#myRoundabout').roundabout({ shape: 'figure8' }); var cnn=[] $('#myRoundabout li').each(function(){ cnn.push(this) }) var curr=0 $('.btnPrev').live('click',function(){ if(curr<0) curr=cnn.length-1 else curr-- $(cnn.slice(curr,curr+1)).trigger('click') return false }) $('.btnNext').live('click',function(){ if(curr<cnn.length) curr++ else curr=0 $(cnn.slice(curr,curr+1)).trigger('click') return false }) }); // ]]> </script> </body> </html>
Файл selects.js
//Связанные выпадающие списки $(document).ready(function () { $('#med_spec').change(function () { var med_spec = $(this).val(); if (med_spec == '0') { $('#services').html('<option>Выберите услугу</option>'); $('#services').attr('disabled', true); $('#doctors').html('<option>Выберите врача</option>'); $('#doctors').attr('disabled', true); return(false); } $('#services').attr('disabled', true); $('#services').html('<option>Загрузка...</option>'); var url = 'get_services.php'; $.post( url, "med_spec=" + med_spec, function (result) { if (result.type == 'error') { alert('Ошибка!'); return(false); } else { var options = ''; $(result.services).each(function() { options += '<option value="' + $(this).attr('service_id') + '">' + $(this).attr('service_name') + '</option>'; }); $('#services').html('<option value="0">Выберите услугу</option>'+options); $('#services').attr('disabled', false); $('#doctors').html('<option>Выберите врача</option>'); $('#doctors').attr('disabled', true); } }, "json" ); }); $('#services').change(function () { var med_spec = $('#med_spec').val(); var services = $(this).val(); if (services == '0') { $('#doctors').html('<option>Выберите врача</option>'); $('#doctors').attr('disabled', true); return(false); } $('#doctors').attr('disabled', true); $('#doctors').html('<option>Загрузка...</option>'); var url = 'get_doctor.php'; $.post( url, "med_spec=" + med_spec, function (result) { if (result.type == 'error') { alert('Ошибка!'); return(false); } else { var options = ''; $(result.doctors).each(function() { options += '<option value="' + $(this).attr('doctor_id') + '">' + $(this).attr('doctor_surname') + ', ' + $(this).attr('doctor_name') + '</option>'; }); $('#doctors').html('<option value="0">Выберите врача</option>'+options); $('#doctors').attr('disabled', false); } }, "json" ); }); //Отправка формы на сервер $('#InsertForm').submit(function(e) { e.preventDefault(); $.ajax({ type: $(this).attr('method'), url: 'insert.php', data: $(this).serialize(), success: function(result){ $('.modal-wrapper').toggleClass('open'); $('.page-wrapper').toggleClass('blur-it'); $('div.modal-wrapper > div.modal > div.content > div.good-job > h1').html(result); return false; } }); }); //Открытие и закрытие модального окна $('.trigger').on('click', function() { $('.modal-wrapper').toggleClass('open'); $('.page-wrapper').toggleClass('blur-it'); return false; }); });
CSS-стили для карусели (style.css):
#carousel { height:412px; padding-top:40px; overflow:hidden; background-color:#008000} /* gallery */ .roundabout-holder { height: 377px; width:915px; margin:0 auto;} .roundabout-moveable-item { height: 377px; width: 469px; cursor: pointer; } .roundabout-moveable-item img { width:100%; height:100%; display:block; } .roundabout-in-focus { cursor: auto; } .btnPrev{ position:absolute; top:186px; left:182px; z-index:900} .btnNext{ position:absolute; top:186px; left:806px; z-index:900} /*footer*/ footer { color:#6b6b6b; font-size:0.75em; background:#fff} footer .inside{ padding:35px 62px 130px 40px } footer a {color:#6b6b6b; text-decoration:none} footer a:hover { text-decoration:underline} footer span{ color:#6b6b6b} .indent-2{ position:relative; padding-left:20px; float:left} .rowElem{ height:51px} .rowElem1{ height:32px;} .block-contact span{ float:right; margin-right:80px}
CSS-стили для формы (form-style.css):
.checkout { width:600px; margin: 50px auto; padding: 15px; background: #f3f6fa; border: 1px solid; border-color: #c2cadb #bbc5d6 #b7c0cd; border-radius: 7px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); } .checkout > p { zoom: 1; } .checkout > p:before, .checkout > p:after { content: ''; display: table; } .checkout > p:after { clear: both; } .checkout > p + p { margin-top: 15px; } .checkout-header { position: relative; margin: -15px -15px 15px; } .checkout-title { padding: 0 15px; line-height: 38px; font-size: 13px; font-weight: bold; color: #7f889e; text-shadow: 0 1px rgba(255, 255, 255, 0.7); background: #eceff5; border-bottom: 1px solid #c5ccdb; border-radius: 7px 7px 0 0; background-image: -webkit-linear-gradient(top, #f5f8fb, #e9edf3); background-image: -moz-linear-gradient(top, #f5f8fb, #e9edf3); background-image: -o-linear-gradient(top, #f5f8fb, #e9edf3); background-image: linear-gradient(to bottom, #f5f8fb, #e9edf3); -webkit-box-shadow: inset 0 1px white; box-shadow: inset 0 1px white; } .checkout-title:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .checkout-price { position: absolute; top: -14px; right: -14px; width: 40px; font: 14px/40px Helvetica, Arial, sans-serif; color: white; text-align: center; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3); text-indent: -1px; letter-spacing: -1px; background: #e54930; border: 1px solid; border-color: #b33323 #ab3123 #982b1f; border-radius: 21px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: -webkit-linear-gradient(top, #f75a3b, #d63b29); background-image: -moz-linear-gradient(top, #f75a3b, #d63b29); background-image: -o-linear-gradient(top, #f75a3b, #d63b29); background-image: linear-gradient(to bottom, #f75a3b, #d63b29); -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); } .checkout-price:before { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; right: 3px; border: 2px solid #f5f8fb; border-radius: 18px; -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.25); } input { margin: 0; line-height: normal; font-family: inherit; font-size: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .checkout-input { float: left; padding: 0 7px; height: 32px; color: #525864; background: white; border: 1px solid; border-color: #b3c0e2 #bcc5e2 #c0ccea; border-radius: 4px; background-image: -webkit-linear-gradient(top, #f6f8fa, white); background-image: -moz-linear-gradient(top, #f6f8fa, white); background-image: -o-linear-gradient(top, #f6f8fa, white); background-image: linear-gradient(to bottom, #f6f8fa, white); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5); } .checkout-input:focus { border-color: #46aefe; outline: none; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #46aefe; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #46aefe; } .lt-ie9 .checkout-input { line-height: 30px; } .checkout-name { width: 150px; } .checkout-card { width: 210px; } .checkout-exp, .checkout-cvc { margin-left: 15px; width: 45px; } .checkout-btn { width: 100%; height: 34px; padding: 0; font-weight: bold; color: white; text-align: center; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2); border: 1px solid; border-color: #1486f9 #0f7de9 #0d6acf; background: #1993fb; border-radius: 4px; background-image: -webkit-linear-gradient(top, #4cb1fe, #229afc 40%, #138df6); background-image: -moz-linear-gradient(top, #4cb1fe, #229afc 40%, #138df6); background-image: -o-linear-gradient(top, #4cb1fe, #229afc 40%, #138df6); background-image: linear-gradient(to bottom, #4cb1fe, #229afc 40%, #138df6); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2); } .checkout-btn:active { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-color: #075bba #0c69d2 #0f7de9; background-image: -webkit-linear-gradient(top, #1281dc, #1593fc); background-image: -moz-linear-gradient(top, #1281dc, #1593fc); background-image: -o-linear-gradient(top, #1281dc, #1593fc); background-image: linear-gradient(to bottom, #1281dc, #1593fc); -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5); } :-moz-placeholder { color: #acb6c8 !important; } ::-moz-placeholder { color: #acb6c8 !important; opacity: 1; } ::-webkit-input-placeholder { color: #acb6c8; } :-ms-input-placeholder { color: #acb6c8; } ::-moz-focus-inner { padding: 0 !important; border: 0 !important; }
CSS-стили для модального окна (window-style.css):
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); html, body { width: 100%; height: 100%; margin: 0; } .page-wrapper { width: 100%; height: 100%; } .blur-it { -webkit-filter: blur(4px); filter: blur(4px); } a.btn { width: 200px; padding: 18px 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 700; text-align: center; text-decoration: none; text-transform: uppercase; color: #fff; border-radius: 0; background: #e2525c; } .modal-wrapper { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(41, 171, 164, 0.8); visibility: hidden; opacity: 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .modal-wrapper.open { opacity: 1; visibility: visible; } .modal { width: 600px; height: 400px; display: block; margin: 50% 0 0 -300px; position: relative; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .modal-wrapper.open .modal { margin-top: -200px; opacity: 1; } .head { width: 90%; height: 32px; padding: 12px 30px; overflow: hidden; background: #e2525c; } .btn-close { font-size: 28px; display: block; float: right; color: #fff; } .content { padding: 10%; } .good-job { text-align: center; font-family: 'Montserrat', Arial, Helvetica, sans-serif; color: #e2525c; } .good-job .fa-thumbs-o-up { font-size: 60px; } .good-job h1 { font-size: 20px; line-height: 1.5; }
Выпадающие связанные списки работают, форма отправляется, открывая модальное окно и внося туда ответ от сервера, но окно закрыть я не могу. Когда я добавил в файл selects.js строки для открытия и закрытия модального окна,
$('.trigger').on('click', function() { $('.modal-wrapper').toggleClass('open'); $('.page-wrapper').toggleClass('blur-it'); return false; });
у меня «зависла» галерея. Окно по-прежнему не закрывается, и не помогает даже preventDefault() для отмены действия по умолчаню. Скорее всего, тут «война скриптов», и кто кого «душит», я не знаю. Нужно ли выносить функции для галереи и модального окна в отдельные файлы? Где эти файлы располагать – в отдельной папке со скриптами или непосредственно в корневой папке сайта, и зависит ли быстрота исполнения скрипта от длины его пути? И над какими скриптами надо писать “async”, а над какими – “defer”? Извините за нубство, но я не знаю проритеты исполнения скриптов, а также как и с кем бороться. Собственного домена у меня нет, сайт на локалхосте. Извините, но придётся разворачивать вложения.