-5

С помощью плагина jQuery UI Dialog нужно сделать всплывающее окно. Есть проблема с селектором. Сейчас все выглядит так:

$(function() {
  if (window.screen.availWidth <= 479) {
    $(".dialog").dialog({
      autoOpen: false,
      width: window.screen.availWidth,
      title: "Запрос прайса",
      closeText: "",
      show: {
        effect: "blind",
        duration: 500
      },
      hide: {
        effect: "blind",
        duration: 500
      }
    });
  } else {
    $(".dialog").dialog({
      autoOpen: false,
      width: 400,
      title: "Запрос прайса",
      closeText: "",
      show: {
        effect: "blind",
        duration: 500
      },
      hide: {
        effect: "blind",
        duration: 500
      }
    });

  }


  $(".opener").on("click", function() {
    $(".dialog").dialog("open");
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="left">
  <div class="dialog"></div>
</div>
<div id="center">
  <a class="opener">Open Dialog</a>
</div>

Все работает как надо. Но сейчас надо сделать так:

$(function() {
  if (window.screen.availWidth <= 479) {
    $("#center .dialog").dialog({
      autoOpen: false,
      width: window.screen.availWidth,
      title: "Запрос прайса",
      closeText: "",
      show: {
        effect: "blind",
        duration: 500
      },
      hide: {
        effect: "blind",
        duration: 500
      }
    });
  } else {
    $("#center .dialog").dialog({
      autoOpen: false,
      width: 400,
      title: "Запрос прайса",
      closeText: "",
      show: {
        effect: "blind",
        duration: 500
      },
      hide: {
        effect: "blind",
        duration: 500
      }
    });

  }


  $(".opener").on("click", function() {
    $("#center .dialog").dialog("open");
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div id="left">
  <div class="dialog"></div>
</div>
<div id="center">
  <div class="dialog"></div>
  <a class="opener">Open Dialog</a>
</div>

Но работает некорректно. Блок скрывается как нужно, но при нажатии на .opener ничего не происходит. Где ошибка?


Update: при правке кто-то внес ссылки на библиотеки. у меня другие:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />


Update: Если бы я мог дать уникальный id этому элементу, вопроса бы не было. Если ли возможность как-то обратиться к нему еще?


В итоге пришлось прописать перед функцией диалогового окна функцию добавления #id нужному элементу:

  $( function() {
  $(".center > .dialog").each(function() {
	  $(this).attr("id", "dialog-center"); 
  });
  })

И уже потом обращаться к нему по id. Если кто-то знает более изящное решение, буду благодарен.

8
  • $( "#center" ).dialog( "open"); вот так попробуйте. 30 мая 2018 в 10:44
  • не работает, к сожалению 30 мая 2018 в 10:50
  • А в консоле браузера ошибки не наблюдается ? 30 мая 2018 в 11:02
  • Касающиеся этого - нет, вроде. Посмотрите test.afinalux.ru #column-left .dprice и .contbot .dprice 30 мая 2018 в 11:06
  • @DmitryUvarov $("#center .dialog").dialog(); так нельзя обращаться к объекту, если вы вешаете на него dialog, в этом то и проблема, просто дайте уникальный id и тогда будет всё корректно работать, должно быть так: $( "#dialog" ).dialog( "open" );
    – RifmaMan
    30 мая 2018 в 11:15

1 ответ 1

-2

Вам нужно на прямую обращаться к объекту, на который вешаете dialog, не знаю почему, но это работает только так, смотрите пример от разработчика.

$(function() {
  if (window.screen.availWidth <= 479) {
    $("#dialog_center").dialog({
      autoOpen: false,
      width: window.screen.availWidth,
      title: "Запрос прайса",
      closeText: "",
      show: {
        effect: "blind",
        duration: 500
      },
      hide: {
        effect: "blind",
        duration: 500
      }
    });
  } else {
    $("#dialog_center").dialog({
      autoOpen: false,
      width: 400,
      title: "Запрос прайса",
      closeText: "",
      show: {
        effect: "blind",
        duration: 500
      },
      hide: {
        effect: "blind",
        duration: 500
      }
    });
  }

  $(".opener").on("click", function() {
    $("#dialog_center").dialog("open");
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="left">
  <div id="dialog_left"></div>
</div>
<div id="center">
  <div id="dialog_center"></div>
  <a class="opener">Open Dialog</a>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.