Jump to content
  • 0

Custom Select не работает в модальном окне


Dioni$$
 Share

Question

Привет всем.

Такая проблема. Делаю кастом селекты с помощью customSelect. Все отлично работает.

Но есть форма с селектами во всплывающем (в модальном) окне. Вот там оно работать не хочет.

Причина как выяснилось что скрипт должен определять ширину контейнера (элемента заменяющего стандартный селект) - так вот в модальном окне она = 0px.

Пробовал другой скрипт для кастом селект - такая же хрень.

Кто сталкивался или какие есть идеи - говорите. Буду благодарен за любую инфу по теме.

Модальные окна делаю с помощью arcticmodal

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

кастом селект для того чтобы можно было свой дизайн селектам сделать. модальные окна в контейнере с display:none. пробовал вешать вызов кастом селекта на кнопку открытия модального окна - результат чуть лучше 2пикселя )

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Adrian_v1
      Всем привет. Новичок, месяц назад понятия не имел о чем речь. За месяц cверстал сайт, с помощью видео уроков и форумов. 

      Есть две проблемы. 
      1. Хочу добавить всплывающие окошко. На CSS и HTML, без JS. (Скрин №1). Не хватает смекалки, как его сделать по вызову кнопки. Кнопка "#24/7/365". 
      2. Какие свойства посоветуете задать для видео фона, что бы он был во все окно браузера. Если заходить с сафари, проблем нет. Но если с хрома, справа торчит полоска. (Скрин №2)
      Критику воспринимаю адекватно, любые советы приветствуются. Отблагодарю советами по тренировкам по плаванию, так как являюсь тренером.
       
      Сайт - http://demolishingswim.club
       


    • By magnuz
      Есть сайт на бутстрапе. Нужно реализовать такой интерфейс с модальными окнами чтобы окон могло быть сколько угодно чтобы при закрытии текущего окна можно было вернуться к предыдущему и обновить его содержимое через ajax. Хватит ли на такое стандартного бутстрапа или надорасширение искать? Можно ли сделать jquery ui окна адаптивными?
    • By karakymg
      Доброго времени суток, помогите сообразить конструкцию.
      Есть ссылки, например:
       
      <a href="one.html" target="modal">link 1</a> <a href="two.html" target="modal">link 2</a> <a href="three.html" target="modal">link 3</a> И сам фрейм:
      <iframe name="modal" src="0" id="modalfrm"></iframe> Как по нажатию на ссылку открыть во фрейме ее href="" (при этом оставаться на этой же странице) я сообразил.
      Не могу сделать модальное окно с фрейма используя только css
      Есть варианты? Хотелось бы увидеть ваш подход к этому делу.
      Нашел один из способов сделать модальное окно "CSS Only"
      Ссылка открывающая модальное окно:
       
      <a rel="nofollow" title="позвонить" href="#target-content" class="icon icon-phone"></a> Само модальное окно:
       
            <div id="target-content">         <a href="#" class="close"></a>         <div id="target-inner">           <h2>Тыры пыры трале вале, я модальное окно</h2>         </div>       </div> И его CSS код:
       
      #target-content {   position: fixed;   top: 0;   right: 0;   bottom: 0;   left: 0;   pointer-events: none;   opacity: 0;   transition: 0.5s;   z-index: 999; } #target-content:target {   pointer-events: all;   opacity: 1; } #target-content #target-inner {   position: absolute;   display: block;   padding: 12px;   line-height: 1.8;   width: 70%;   top: 50%;   left: 50%;   -webkit-transform: translateX(-50%) translateY(-50%);           transform: translateX(-50%) translateY(-50%);   box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);   background: white;   color: #34495E; } #target-content a.close {   content: "";   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   background-color: black;   opacity: 0.8;   -webkit-transition: opacity 200ms;   transition: opacity 200ms; } #target-content a.close:hover {   opacity: 0.4; } Но вот незадача, атрибут target="" уже занят открытием модального окна, как же мне тогда во фрейм загрузить страницу указанную в атрибуте href="" ?
    • By brabus
      Всем привет!
      Думаю, вопрос простой, но не для меня, второй день копаюсь..
      Есть модальное окно (div), оно запускается, всё хорошо. в нём есть кнопка:
      <button type="submit" class="btn-3" onclick="sendzakaz();"><span>Заказать</span></button> <script> function sendzakaz() { $.ajax ( { type: 'POST', url: './mail.php', data: 'name='+document.getElementById('clientname').value+'&phone='+document.getElementById('clientphone').value, cache: false, timeout: 2000, } ); } </script> Это всё отрабатывает, но мне нужно, чтобы по нажатии на "Заказать" после исполнения sendzakaz() открывалось ещё одно модальное окно:
      <div id="msg" class="modal-win modal-msg"> <a href="" onclick="exit_modal(); return false;" class="close"></a> <div class="inner"> <img src="img/accept-img.png" tppabs="http://xxx.ru/img/accept-img.png" alt=""> <h2><span>ЗАЯВКА ПРИНЯТА</span></h2> <p>Мы скоро Вам перезвоним <br><small>Пожалуйста, включите <br>Ваш мобильный телефон.</small></p> </div> </div> Помогите, пожалуйста!
       
       
    • By ellato44
      Доброго времени суток!
      Помогите решить задачку следующего характера:
      имеется код открытия модального окна - http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
      пример так же ниже указан:
      <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> необходимо, чтобы при попытке пользователем закрыть вкладку страницы, т.е. при нахождении курсора скажем в 5px от кнопки закрытия вкладки запускалось модальное окно с контентом., при этом, чтобы не каждый раз оно запускалось, а один раз для каждого нового пользователя (тут дело с куки связано)
      пример встречал, но не получается мне новичку привязать к скрипту нужное мне модальное окно ))
      вот собственно пример:
      пример скрипта открытия модального окна при попытке уйти со страницы сайта взят отсюда - http://dimox.name/popup-window-on-first-web-site-visit
      (function($) { $(function() { // Проверим, есть ли запись в куках о посещении посетителя // Если запись есть - ничего не делаем if (!$.cookie('was')) { // Покажем всплывающее окно $('#boxUserFirstInfo').arcticmodal({ closeOnOverlayClick: false, closeOnEsc: true }); } // Запомним в куках, что посетитель к нам уже заходил $.cookie('was', true, { expires: 365, path: '/' }); }) })(jQuery) не получается приспособить данный скрипт для открытия такого модального окна.. помогите неучу? )) буду благодарен за помощь!
  • Обсуждения

    • <div class="modal-body"> <?php if (!empty($_SESSION['cart'])): ?> <?php else: ?> <p>Корзина пуста...</p> <?php endif; ?> <?php if (!empty($_SESSION['cart'])): ?> <table class="table"> <thead> <tr> <th scope="col">Изображение</th> <th scope="col">Название</th> <th scope="col">Цена</th> <th scope="col">Количество</th> </tr> </thead> <tbody> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <tr> <td><a href="#"><img class="br-3" src="images/<?= $item['img'] ?>" alt="<?= $item['title'] ?>"></a></td> <td><p><?= $item['title'] ?></p></td> <td><?= $item['price'] ?></td> <td> <?= $id ?> <a id="min-to-cart" href="?cart=minus&id=<?= $id ?>" class="min-to-cart minus-btn badge-light minus-to-cart" data-id="<?php echo $id ?>"></a> <?= $item['qty'] ?> <a id="plus-to-cart" href="?cart=plus&id=<?= $id ?>" class="plus-btn badge-light plus-to-cart" data-id="<?php echo $id ?>"></a> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <button type="button" class="btn delete-btn remove-from-cart" id="remove-from-cart" data-id="<?php echo $id ?>"></button> </td> </tr> <?php endforeach; ?> <tr> <td colspan="4" align="right">Товаров: <span id="modal-cart-qty"><?= $_SESSION['cart.qty'] ?></span> <br> На сумму: <?= $_SESSION['cart.sum'] ?> руб.</td> </tr> </tbody> </table> <form action="telegram.php" method="POST"> <legend>Введите имя, номер телефона и адрес:</legend> <div class="form-group"> <input type="text" class="form-control" id="" name="name" placeholder="Введите имя"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="phone" placeholder="Введите телефон"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="address" placeholder="Введите адрес"> </div> <div class="form-group"> <textarea name="msg" placeholder="Ваш комментарий..."></textarea> </div> <button type="submit" class="btn btn-success">Оформить заказ</button> <button type="button" class="btn btn-danger" id="clear-cart">Очистить корзину</button> </form> <!--<script src="common/scripts.js"></script>--> <?php endif; ?> </div> <div class="modal-footer"> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <?php endforeach; ?> </div>               функция полной очистки работает, видимо потому что этот класс есть изначально, а не появляется из-за сессии   $('.add-to-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'add', id: id}, dataType: 'json', success: function (res) { if (res.code == 'ok') { showCart(res.answer); } else { alert(res.answer); } }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content .remove-from-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); console.log(id); }); $('#get-cart').on('click', function (e){ e.preventDefault(); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'show'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content').on('click', '#clear-cart', function (){ $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'clear'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); });
    • Например, добавить  .wrapper li {     clear: both; } http://jsfiddle.net/e3f9ozLr/
    • Добрый день.На сайте после удаления переводчика gtranslate появилась такая вот проблема:при переадресации с http://tto-studio.com.ua/ на https://tto-studio.com.ua/ru/ вылетает такая вот страница <strong>https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=</strong>Что мне делать, как это можно исправить? А точнее — на странице https://tto-studio.com.ua/ru/ в адресной строке я удаляю букву s с http s:// и нажимаю enter. И заместь того чтобы меня кинуло на страницу — https://tto-studio.com.ua/ru/ меня кидает на — https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=
    • Ты в стрелочной функции из-за того что у тебя одно выражение опустил { }. А это ведет к неявному возврату результата выражения.
    • Здравстуйте, каким образом можно получить доступ к Mathcad Application Server для получения доступа к документам и функциям Mathcad через Интернет. Может быть, есть другой способ связать интернет с Mathcad ?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy