jQuery UI overlay does not show mask when triggered via jQuery

Question

I'm trying to chain together two overlays such that the second overlay is called via jQuery when the user clicks a button in the first overlay.

The problem is that the second overlay appears without the mask. I added an alternative link to directly call the second overlay and that works just fine. It appears that the behavior for the trigger click event when called from jQuery is different than when actually clicking on the link.

Here is a simplified test case:

<!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>

score 0 · Answer 1 · edited May 23 '17 at 11:46

OK, after some more digging, I found this solution. But I ended up taking a different (simpler) approach.

I just modified the javascript to hide the first overlay before displaying the second:

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

});

jQuery UI overlay does not show mask when triggered via jQuery

1 Answers1