jquery-ui之最后一个 jQuery 模态对话框 z-index 覆盖初始模态 z-index

Renyi-Fan 阅读:10 2024-02-25 17:59:16 评论:0

我需要一次显示 2 个对话框模式。由于第一个对话框的内容需要使用一些绝对定位和 z-indexing,所以覆盖的 z-index 对我来说很重要。

我遇到的问题是,如果我在 z-index 为 300 处显示第一个模态,则叠加层的 z-index 为 301。如果我然后显示 z-index 为 500 的另一个模态,则新叠加层将获得 z- 501 的索引。如果我关闭两个模态并再次打开第一个模态,而不是获得 z-index 为 301 的叠加,它是 503。

这是一些示例代码。

<html>                                                                   
<head>                                                                   
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>         
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js" type="text/javascript"></script>         
<script type="text/javascript">               
$(document).ready(function(){ 
    $('#modal').hide(); 
    $('#success-message').hide(); 
    $('#show-modal-button').click(function(){ 
        $('#modal').dialog({ 
              modal: true, 
              buttons: { 
                  OK: function () { 
                      $(this).dialog("close"); 
                  } 
              }, 
              draggable: false, 
              title: 'test modal', 
              resizable: false, 
              zIndex: 400 
          }); 
 
    }); 
 
    $('#modal-button').click(function(){ 
        $('#success-message').dialog({ 
              modal: true, 
              buttons: { 
                  OK: function () { 
                      $(this).dialog("close"); 
                  } 
              }, 
              draggable: false, 
              title: 'test modal', 
              resizable: false, 
              zIndex: 500 
          }); 
    }); 
}); 
</script>                                                                
</head>                                                                  
<body>      
<input type="button" id="show-modal-button" value="show modal"/>       
<div id="modal"> 
    <input type="button" id="modal-button" value="push"/> 
</div>                        
<div id="success-message"><p>test</p></div>                 
</body>                                                                  
</html> 

更新
使用下面的代码关闭时,我可以通过从 DOM 中删除小部件来使其工作。我觉得这是一个黑客,它要么是一个错误,要么是我的方法做错了。如果没有人能告诉我我做错了什么,我会发布我的解决方案作为答案。
$('#modal-button').click(function(){         
    $('#success-message').dialog({ 
        modal: true, 
        buttons: { 
            OK: function () { 
                $(this).dialog("close"); 
                $(this).dialog('widget').remove(); 
            } 
        }, 
        draggable: false, 
        title: 'test modal', 
        resizable: false, 
        zIndex: 500 
    });      
}); 

请您参考如下方法:

使用下面的代码关闭时,我可以通过从 DOM 中删除小部件来使其工作。我觉得这是一个黑客,它要么是一个错误,要么是我的方法做错了。如果没有人能告诉我我做错了什么,我会发布我的解决方案作为答案。

$('#modal-button').click(function(){         
    $('#success-message').dialog({ 
        modal: true, 
        buttons: { 
            OK: function () { 
                $(this).dialog("close"); 
                $(this).dialog('widget').remove(); 
            } 
        }, 
        draggable: false, 
        title: 'test modal', 
        resizable: false, 
        zIndex: 500 
    });      
}); 


标签:jquery
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号