當通過jQuery觸發jQuery UI覆蓋不顯示掩碼

我試圖鏈接兩個覆蓋，使第二個覆蓋是通過jQuery調用時，用戶單擊第一個覆蓋中的按鈕。當通過jQuery觸發jQuery UI覆蓋不顯示掩碼

問題是第二個覆蓋層沒有掩膜時出現。我添加了一個替代鏈接來直接調用第二個覆蓋圖，並且工作得很好。它出現從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>

來源

2012-04-01 oiler_no11

OK，經過一些挖，我發現這個solution。但我最終採取了不同的（更簡單的）方法。

我只是修改的JavaScript顯示第二前隱藏第一覆蓋：

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

});

來源

2012-04-19 05:59:02

當通過jQuery觸發jQuery UI覆蓋不顯示掩碼

回答

相關問題