Question

我正在尝试将两个叠加层链接在一起，以便当用户单击第一个叠加层中的按钮时，通过jQuery调用第二个叠加层。

问题是第二个叠加层没有遮罩。我添加了一个替代链接来直接调用第二个叠加层，这很好用。出现时，从jQuery调用时触发器单击事件的行为与实际单击链接时的行为不同。

这是一个简化的测试用例：

<!DOCTYPE html>
<html>
<head>
  <!-- include the Tools -->
  <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<style>
/* the overlayed element */
.simple_overlay {
    display:none;
    z-index:10000;
    width:200px;
    min-height:200px;
    border:1px solid #666;
    background-color:#FFFFFF;

}

/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url(/images/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}
  </style>
</head>
<body>

<div id="triggers">
  <div id="Overlay1Trigger" class="OverlayClass" style="cursor:pointer" rel="#mies1">Click me to start</div>
  <br/><br/><br/><br/><br/><br/>
  <div id="Overlay2Trigger" class="OverlayClass" style="cursor:pointer;visibility:true" rel="#mies2">Alternative option</div>
</div>

<div class="simple_overlay" id="mies1">
  <div class="details">
    <form name="popup" method="post" action="/">
      Click the button to get confirmation dialog
      <br/><br/><input type="submit" id="SubmitButton" onclick="$('.close').click();javascript:Confirm();return false;" value="Confirm" title="Confirm"/>
    </form>
  </div>
</div>

<div class="simple_overlay" id="mies2">
  <div class="details">
    Confirmed!
    <form name="popup" method="post" action="/">
      <br/><br/><input type="submit" id="CloseButton" onclick="$('.close').click();return false;" value="cancel" title="cancel"/>
    </form>
  </div>
</div>

<script>
   function Confirm() {
   // $('#Overlay2Trigger').data("overlay").load(); // This doesn't work either!
   $('#Overlay2Trigger').click();
  return false;
}
</script>

<script>
  $(document).ready(function() {
      $(".OverlayClass").overlay();
    });
</script>

<script>

$(".OverlayClass").overlay({
    mask: '#789'
});
</script>
</body>
</html>

Answer 1

好的，经过一番挖掘，我找到了这个solution。但我最终采取了一种不同的（更简单的）方法。

我刚修改了javascript以隐藏第一个叠加层，然后再显示第二个叠加层：

function Confirm() {
    $('#mies1').hide();
    $('#Overlay2Trigger').data("overlay").load();
}
$(document).ready(function() {
    $(".OverlayClass").overlay({
        oneInstance: false,
        mask: '#789',
        load: false
    });

});

当通过jQuery触发时，jQuery UI overlay不显示掩码

1 个答案: