使用jQuery将DIV放在另一个DIV上

Place DIV over another DIV using jQuery

本文关键字：DIV 另一个 使用 jQuery      更新时间：2023-09-26

如何使用jQuery将新的<DIV>正好放置在现有的<DIV>之上，同时使现有<DIV>中的另一个<DIV>出现在新的<DIV>之上？

为什么我希望这样做：我有一个jQueryUI对话框，其中包含一个tinyMCE编辑器，当tinyMCE编辑打开时，我希望在jQueryUI对话上放置一个覆盖层并禁用所有单击事件，但让tinyMCE编辑器出现在覆盖层的顶部并保持活动。

http://jsbin.com/sozelafequ

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>jQueryUI Dialog Overlay</title>
        <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
        <style type="text/css"></style> 
        <script type="text/javascript"> 
            tinymce.init({
                selector: '#editor',
                setup: function(ed) {
                    ed.on('init', function(e) {
                        e.target.hide();
                    });
                }
            });
            $(function(){
                $('#edit').click(function() {
                    console.log(dialog.parent())
                    dialog.parent().append($('<div>',{id:'blocker',style:"z-index: 100; border: medium none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.6; position: fixed;"}));
                    tinymce.get('editor').show();
                });
                $("#open").click(function(){dialog.dialog("open");});
                var dialog=$("#dialog").dialog({
                    autoOpen    : false,
                    resizable   : false,
                    height      : 400,
                    width       : 400, 
                    modal       : true,
                    open        : function() {
                        $('#editor').html('Some data obtained from the DB.');
                    }
                });
            });
        </script>  
    </head>
    <body>
        <button id='open'>Open</button>
        <div id="dialog" title="dialog title">
            <a href="javascript:void(0)" id="edit">Edit</a>
            <div id="editor"></div>
        </div>
    </body>
</html>

只需在上面添加一个宽度完全相同的div，这可以通过另一个div完成，也可以使用:after选择器。如果你让你通过有绝对孩子的亲戚来做这件事，他们的尺寸总是一样的。因为如果:after（与:before一样），它将被放置在父分区之上。

#ExampleDiv{
    position: relative;
}
#ExampleDiv:after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

您可以在单击按钮时添加一个类，并使用该类激活:after。

正如Martijn所说，在现有的<DIV>上使用position:relative，在新的<DIV>上使用position:absolute。此外，增加现有<DIV>内的任何元素的z-index，该元素应在新的<DIV>之上。

如果你不同意这个答案，请说明你为什么这么做。

http://jsbin.com/qifagiducu

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>jQueryUI Dialog Overlay</title>
        <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
        <style type="text/css"></style> 
        <script type="text/javascript"> 
            tinymce.init({
                selector: '#editor',
                setup: function(ed) {
                    ed.on('init', function(e) {
                        e.target.hide();
                    });
                }
            });
            $(function(){
                $('#edit').click(function() {
                    var dialog=$("#dialog").parent().append($('<div>',{id:'blocker',style:"margin: 0; padding: 0; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0, 0, 0); opacity: 0.4; position: absolute;"}));
                    $(this).next().css('z-index',parseInt(dialog.css('zIndex'), 10)+1)
                    tinymce.get('editor').show();
                });
                $("#open").click(function(){$("#dialog").dialog("open");});
                $("#dialog").css('position','relative').dialog({
                    autoOpen    : false,
                    resizable   : false,
                    height      : 400,
                    width       : 400, 
                    modal       : true,
                    open        : function() {
                        $('#editor').html('Some data obtained from the DB.');
                    }
                });
            });
        </script>  
    </head>
    <body>
        <button id='open'>Open</button>
        <div id="dialog" title="dialog title">
            <a href="javascript:void(0)" id="edit">Edit</a>
            <div id="editor"></div>
        </div>
    </body>
</html>
相关文章：