Наложение пользовательского интерфейса jQuery не отображает маску при запуске через jQuery - PullRequest
Новая
       40

Наложение пользовательского интерфейса jQuery не отображает маску при запуске через jQuery

0 голосов
/ 01 апреля 2012

Я пытаюсь связать воедино два оверлея так, чтобы второй оверлей вызывался через 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>

1 Ответ

0 голосов
/ 19 апреля 2012

ОК, после еще нескольких копаний я нашел это решение . Но в итоге я выбрал другой (более простой) подход.

Я только что изменил JavaScript, чтобы скрыть первое наложение перед отображением второго: 

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

});​
...