Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.06.2017, 15:52
Аспирант
Отправить личное сообщение для Scantraxx Посмотреть профиль Найти все сообщения от Scantraxx
 
Регистрация: 11.12.2016
Сообщений: 47

Модальное окно
У меня есть скрипт, который открывает модальное окно, когда я нажимаю на кнопку "Купить":
<script>
    $(document).ready(function(){
        
        $.ajaxSetup({cache:false});

        $(".viewDialog").on("click", function(e){
            e.preventDefault();

            $("<div></div>")
            .addClass("dialog")
            .appendTo("body")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                close: function() {$(this).remove() },
                modal: true
            })
            .load(this.href);
        });
    });
</script>


Как мне его модифицировать, чтобы при открытом модальном окне, если я нажму куда-то в сторону от него - окно закрылось. И еще, если при открытом окне я попытаюсь открыть новое, текущее надо закрыть.
Я очень плохо разбираюсь в js, по этому примеры которые находил, не смог подстроить под свой код.
Ответить с цитированием
  #2 (permalink)  
Старый 04.06.2017, 16:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,071

Сообщение от Scantraxx
И еще, если при открытом окне я попытаюсь открыть новое, текущее надо закрыть.
$(".viewDialog").on("click", function(e){
            e.preventDefault();
            $(".dialog").dialog("close");

            $("<div></div>")
Ответить с цитированием
  #3 (permalink)  
Старый 04.06.2017, 16:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,071

dialog close jquery-ui
Scantraxx,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
     $.ajaxSetup({cache:false});

        $(".viewDialog").on("click", function(e){
            e.preventDefault();
            e.stopPropagation();
            $("<div></div>")
            .addClass("dialog")
            .appendTo("body")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                close: function() {$(this).remove() },
                modal: false
            })
           // .load(this.href);
        });
  $(document).on("click", function(e) {
  $(e.target).closest(".ui-dialog").length || $(".dialog").dialog("close");
})
});
  </script>
</head>

<body>
  <a href="" class="viewDialog" data-dialog-title="1">1</a>
  <a href="" class="viewDialog" data-dialog-title="2">2</a>
  <a href="" class="viewDialog" data-dialog-title="3">3</a>
  <a href="" class="viewDialog" data-dialog-title="4">4</a>
  <a href="" class="viewDialog" data-dialog-title="5">5</a>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 04.06.2017, 16:58
Аспирант
Отправить личное сообщение для Scantraxx Посмотреть профиль Найти все сообщения от Scantraxx
 
Регистрация: 11.12.2016
Сообщений: 47

рони,
Спасибо большое! Очень выручили
Ответить с цитированием
  #5 (permalink)  
Старый 04.06.2017, 17:14
Аспирант
Отправить личное сообщение для Scantraxx Посмотреть профиль Найти все сообщения от Scantraxx
 
Регистрация: 11.12.2016
Сообщений: 47

рони,
только у меня почему-то не работает закрытие окна, при открытии нового. с чем это может быть связано? Ссылки подключил ваши, чтобы уж точно все нормально было
Ответить с цитированием
  #6 (permalink)  
Старый 04.06.2017, 18:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,071

Scantraxx,
нужен код, может строку 18 не добавили?
Ответить с цитированием
  #7 (permalink)  
Старый 04.06.2017, 19:11
Аспирант
Отправить личное сообщение для Scantraxx Посмотреть профиль Найти все сообщения от Scantraxx
 
Регистрация: 11.12.2016
Сообщений: 47

рони,
я полностью скопипастил ваш скрипт, так что строка есть, в консоле браузера ошибок никаких тоже нету. У вас все работает, это я вижу, но совсем не понимаю почему у меня нет.
Ответить с цитированием
  #8 (permalink)  
Старый 04.06.2017, 19:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,071

Scantraxx,
нет кода нет совета
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальное окно, запретить скролл всему документу на чистом JS TommyWork Общие вопросы Javascript 8 13.04.2017 10:39
Вывод информации в модальное окно frack Общие вопросы Javascript 2 04.08.2016 11:46
Модальное окно. Salvat Элементы интерфейса 4 25.02.2016 09:33
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 13:27
Как передать переменную в модальное окно sinsir jQuery 24 20.06.2013 16:59