Если я нажимаю на второе изображение с розовым фоном, появляется диалоговое окно. Мне нужен фоновый слой под ним, который не появляется, когда я использую modal: true, потому что в моем проекте есть настроенная библиотека. Как я могу добавить этот фон под диалоговое окно без использования modal: true?

$(function() {
    $( "#dialog" ).dialog({
       //modal: true,
       autoOpen: false,  
    });
    $(".images").find("a").eq(1).on('click', function(e) {
        e.preventDefault();
        setTimeout(() => {
            window.location.href = $(this).prop("href");
        }, 5000);
        $( "#dialog" ).dialog( "open");
    });
});
#dialog {
        display: none;
    }
    
img {
        width: 300px;
        height: 250px;
        object-fit: cover;
    }
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src=""></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    
    <div class="images">
        <a href="https://www.site1.com">
            <img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
        </a>
        <br>
        <a href="https://www.site2.com">
            <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
        </a>
    </div>
    <div id="dialog" title="Lorem ipsum">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
    </div>
1
JustMe 8 Сен 2020 в 13:27

1 ответ

Лучший ответ

Вам необходимо переместить событие dialog в функцию щелчка, чтобы dialog был инициализирован одновременно с возникновением события click.

Чтобы изменить background pink, вы можете либо использовать CSS с правилом !important, либо использовать addClass для своего dialogue, когда он открывается.

Изменить: поскольку вам не нужна опция modal: true по причинам, связанным с library. Вы можете использовать addClass и removeClass в jQuery, чтобы добавить вам пользовательский модальный body и remove class при закрытии dialogue.

Живая рабочая демонстрация: (оба изображения показывают диалог с pink модальным фоном)

$(function() {

  $(".images").find("a").on('click', function(e) {
    e.preventDefault();

    //dialog box
    $("#dialog").dialog({
      autoOpen: false,
      open: function(e) {
        $('body').addClass('modal');
      },
      close: function(e) {
        $('body').removeClass('modal');
      }
    }).dialog("open");

    //Href
    setTimeout(() => {
      // window.location.href = $(this).prop("href");
    }, 5000);
  });
});
img {
  width: 300px;
  height: 250px;
  object-fit: cover;
}

.modal {
  background-color: pink;
  opacity: 1;
  overflow: auto;
}

#dialog {
    display: none;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="images">
  <a href="https://www.site1.com">
    <img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
  </a>
  <br>
  <a href="https://www.site2.com">
    <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </a>
</div>
<div id="dialog" title="Lorem ipsum">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
2
Always Helping 8 Сен 2020 в 11:12