当通过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覆盖不显示掩码

回答

相关问题