Question

我正在创建应该使用由用户控制的多个对话框的Web应用程序。问题是有某种层不允许我触摸背景元素。打开对话框时，尝试单击某些链接。怎么解决？此外，我在尝试使用链接点击创建其他对话框时出错。

$(function() {
  function addButtons(dlg) {
    // Define Buttons
    var $close = dlg.find(".ui-dialog-titlebar-close");
    var $min = $("<button>", {
      class: "ui-button ui-corner-all ui-widget ui-button-icon-only ui-window-minimize",
      type: "button",
      title: "Minimize"
    }).insertBefore($close);
    $min.data("isMin", false);
    $("<span>", {
      class: "ui-button-icon ui-icon ui-icon-minusthick"
    }).appendTo($min);
    $("<span>", {
      class: "ui-button-icon-space"
    }).html(" ").appendTo($min);
    var $max = $("<button>", {
      class: "ui-button ui-corner-all ui-widget ui-button-icon-only ui-window-maximize",
      type: "button",
      title: "Maximize"
    }).insertBefore($close);
    $max.data("isMax", false);
    $("<span>", {
      class: "ui-button-icon ui-icon ui-icon-plusthick"
    }).appendTo($max);
    $("<span>", {
      class: "ui-button-icon-space"
    }).html(" ").appendTo($max);
    // Define Function
    $min.click(function(e) {
      if ($min.data("isMin") === false) {
        console.log("Minimize Window");
        $min.data("original-pos", dlg.position());
        $min.data("original-size", {
          width: dlg.width(),
          height: dlg.height()
        });
        $min.data("isMin", true);
        dlg.animate({
          height: '40px',
          top: $(window).height() - 50
        }, 200);
        dlg.find(".ui-dialog-content").hide();
      } else {
        console.log("Restore Window");
        $min.data("isMin", false);
        dlg.find(".ui-dialog-content").show();
        dlg.animate({
          height: $min.data("original-size").height + "px",
          top: $min.data("original-pos").top + "px"
        }, 200);
      }
    });
    $max.click(function(e) {
      if ($max.data("isMax") === false) {
        console.log("Maximize Window");
        $max.data("original-pos", dlg.position());
        $max.data("original-size", {
          width: dlg.width(),
          height: dlg.height()
        });
        $max.data("isMax", true);
        dlg.animate({
          height: $(window).height() -28+ "px",
          width: $(window).width()-10 + "px",
          top: 0,
          left: 0
        }, 200);
      } else {
        console.log("Restore Window");
        $max.data("isMax", false);
        dlg.animate({
          height: $max.data("original-size").height + "px",
          width: $max.data("original-size").width + "px",
          top: $max.data("original-pos").top + "px",
          left: $max.data("original-pos").top + "px"
        }, 200);
      }
    });
  }

  $('#window').dialog({
    draggable: true,
    autoOpen: true,
    classes: {
      "ui-dialog": "ui-window-options",
      "ui-dialog-titlebar": "ui-window-bar"
    },
    modal: true,
    responsive: true,
  });

  addButtons($(".ui-window-options"));

  $("#winOpener").click(function() {
    $("#window").dialog("open");
  })
   $("#winOpener1").click(function() {
    $("#window1").dialog("open");
  })
   $("#winOpener2").click(function() {
    $("#window2").dialog("open");
  })
});

	.ui-window-bar .ui-button {
  position: absolute;
  top: 50%;
  width: 20px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}

.ui-window-bar .ui-window-minimize {
  right: calc(.3em + 40px);
}

.ui-window-bar .ui-window-maximize {
  right: calc(.3em + 20px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css">
       <script src="https://code.jquery.com/jquery-1.7.0.js"></script>
    <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js">
    </script>
    <script src="https://raw.githubusercontent.com/CrazyTuna/jquery-extendeddialog/master/src/fq-ui.extendeddialog.js"></script>
    
<a href="#" id="winOpener">Open Window</a>
<a href="#" id="winOpener1">Open Window</a>
<a href="#" id="winOpener2">Open Window</a>
<div id="window" title="Test Window">window</div>
<div id="window1" title="Test Window1">window</div>
<div id="window2" title="Test Window2">window</div>

Jquery打开多个对话框并使后台响应操作

0 个答案: