Когда диалог jQuery включен, я не хочу, чтобы пользователь взаимодействовал с фоном - PullRequest
Новая
       90

Когда диалог jQuery включен, я не хочу, чтобы пользователь взаимодействовал с фоном

0 голосов
/ 18 октября 2019

Если пользователь нажимает на внешнюю ссылку, появляется диалоговое окно jQuery UI с кнопками «ОК» и «Отмена», а когда они нажимают «ОК», они должны перейти на внешний сайт.

Все работает, как и ожидалось, но проблема в modal:true;, когда диалог включен, пользователь может работать на фоне, и я хочу, чтобы фон был серым, когда всплывающее окно включено. 

$(window).on('load', function(){
    $.expr[":"].external = function(a) {
        var linkhn = a.hostname.split('.').reverse();
        var linkHref = linkhn[1] + "." + linkhn[0];
        var domainhn = window.location.hostname.split('.').reverse();
        var domainHref = domainhn[1] + "." + domainhn[0];
        return !a.href.match(/^mailto\:/) && !a.href.match(/^tel\:/) && linkHref !== domainHref;
    };
    $("a:external").addClass("ext_link");
});

$(document).ready(function(){
    jQuery(document).on("click", ".ext_link", function () {
$("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id','dialog-confirm').css('display','none');
var link_val = this;
  $('#dialog-confirm').dialog({
   title: "External Link",
      height: "auto",
      width: 410,
    resizable: false,
      modal: false,
    buttons: {
      "Ok": function() {
         window.open( link_val.href); $(this).dialog("close"); $(this).dialog('destroy').remove();
      },
      Cancel: function () {jQuery(this).dialog("close"); $(this).dialog('destroy').remove() ;}
    }
  }).dialog("widget").find(".ui-dialog-titlebar").hide(); 
  return false;
});
});

1 Ответ

3 голосов
/ 23 октября 2019

Вы можете использовать другой div, который открывается и покрывает всю страницу, код ниже написан таким образом.

Не мешая большей части вашего кода, я добавил <div>, который будет скрыт назагрузка страницы. Это <div> будет показано при открытии всплывающего окна, а то же самое <div> будет скрыто при закрытии диалога. 

$(document).ready(function() {
  jQuery(document).on("click", ".ext_link", function() {
    $('#scrLoader').show();
    $("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id', 'dialog-confirm').css('display', 'none');
    var link_val = this;
    $('#dialog-confirm').dialog({
      title: "External Link",
      height: "auto",
      width: 410,
      resizable: false,
      buttons: {
        "Ok": function() {
          window.open(link_val.href);
          $(this).dialog("close");
          $(this).dialog('destroy').remove();
        },
        Cancel: function() {
          $('#scrLoader').hide();
          jQuery(this).dialog("close");
          $(this).dialog('destroy').remove();
        }
      }
    }).dialog("widget").find(".ui-dialog-titlebar").hide();
    return false;
  });
});
#scrLoader {
  background-color: #333;
  opacity: 0.8;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 100;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-image: url('your path to a loader gif');
  background-position: center;
  background-repeat: no-repeat;
}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<input type="button" class="ext_link" value="click me" />
<div id="scrLoader" style="display: none;" hidden="true"></div>

Вы также можете использовать GIF, например загрузочный GIF, который будет отображаться, когда этот конкретный div открыт, так что пользователь понимает, что какой-то процесспродолжается.

Надеюсь, это поможет.

...