jQuery UI Overlay zeigt keine Maske, wenn über jQuery ausgelöst

Ich versuche, zwei Overlays miteinander zu verketten, so dass das zweite Overlay über jQuery aufgerufen wird, wenn der Benutzer auf eine Schaltfläche in der ersten Überlagerung klickt.jQuery UI Overlay zeigt keine Maske, wenn über jQuery ausgelöst

Das Problem ist, dass das zweite Overlay ohne die Maske erscheint. Ich habe einen alternativen Link hinzugefügt, um das zweite Overlay direkt aufzurufen, und das funktioniert gut. Es erscheint, dass das Verhalten für das Trigger-Click-Ereignis beim Aufruf von jQuery unterscheidet sich als beim Klicken auf den Link tatsächlich.

Hier ist ein vereinfachtes Testfall:

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

Quelle

2012-04-01 oiler_no11

OK, nachdem einige mehr zu graben, ich diese solution gefunden. Aber ich habe einen anderen (einfacheren) Ansatz gewählt.

Ich änderte nur die Javascript, um die erste Auflage zu verstecken, bevor die zweite Anzeige:

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

});

Quelle

2012-04-19 05:59:02

jQuery UI Overlay zeigt keine Maske, wenn über jQuery ausgelöst

Antwort

Verwandte Themen