将 div 用作带有 jQuery 的模态对话框的最简单方法

Question

我想使用 jQuery 将 div 的内容显示为模态对话框。

有没有什么方法可以不使用 Bootstrap 或其他任何东西...？

我想通过 CSS 以我自己的方式个性化我的模式对话框。

请告诉我一个方法...

Answer 1

到"roll-your-own"模式对话框，你只需要两个div：

叠加层 - 位于页面内容之上（我们使用 z-index 来实现）
对话框 - 位于叠加层之上 div

这是一个基本的代码示例。

$('#mybutt').click(function(){
    $('#myOverlay').show();
    $('#myModal').show();
});

$('#shutme, #myOverlay').click(function(){
    $('#myModal').hide();
    $('#myOverlay').hide();
});

#content{background:wheat;}
#myOverlay{position:fixed;top:0;left:0;height:100%;width:100%;background:black;opacity:0.7;display:none;z-index:1;}
#myModal{position:fixed;top:10%;left:10%;border:3px solid darkcyan;display:none;z-index:2;}
#shutme{position:absolute;right:20px;bottom:20px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="mybutt">Show Modal</button>
<div id="myOverlay"></div>
<div id="myModal">
    <img src="http://placekitten.com/450/325" />
    <input type="button" id="shutme" value="Close" />
</div>
<div id="content">
    This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. 
</div>

jsFiddle Demo

重要提示：

z-index 不适用于使用 默认值 [=122= 的元素] 位置值 (position:static)。如果不需要将元素设置为 absolute 或 fixed，则将其设置为 position:relative（这实际上与默认的 static 值相同，但也支持 z-index).
position 对于对话框本身的 HTML 结构同样重要。再次，将其从默认值 position:static 更改。 fixed 的位置值会将其放置在 屏幕上的固定位置 ，而 absolute 将允许您将它放置在第一个没有 position 值 static 的父元素中的任何位置（你可以看到讨厌的 position:static 值是有问题的——奇怪为什么它被选为默认值。
叠加层 div 使用 z-index 配置为位于网页顶部。我们这样做有两个原因：（1）在视觉上很好地构建对话框； (2) 防止用户在对话框关闭之前与页面进行交互。 （记住：position:absolute 或 position:fixed） 一个很好的效果是使这个 div semi-transparent，使用 opacity CSS 属性.
对话框 div 使用 z-index 配置为位于叠加层之上。不要将对话框 div 放在叠加层 div 内。你可以这样做，但它有点困难 - 先这样做，然后尝试其他可能性。
将叠加层和对话框 div 结构放在正文的最顶部或最底部都很方便。不要将它们放在容器中。如果您使用 Bootstrap，您可以使用此方法，但您不需要，因为 Bootstrap has its own modal dialog structure配置 super-cool 模态对话框要容易一些。如果您仔细查看他们的 HTML，您会发现它与我们在此使用的概念完全相同 - 只是功能更多。
您不需要为每条消息使用单独的模式。将信息交换进出模态对话框结构非常简单。有关更多想法和演示，请参阅。

事实上，这是一个关键的想法，所以这是另一个例子来说明它是多么简单：

$('[id^=mybutt]').click(function(){
    //above selector traps clicks on els where: id "starts with" mybutt
    let btnID = $(this).attr('id');
    let mdlNo = btnID.split('_')[1];
    $('#content_num').val(mdlNo); //Store so can put the data back when done
    //below line MOVES data from numbered storage div into the modal for display
    $('#content_mdl' + mdlNo + ' .mdl_content').appendTo( $('#myMdlInner') );
    $('#myOverlay').show();
    $('#myModal').show();
});

$('#shutme, #myOverlay').click(function(){
    $('#myModal').hide();
    $('#myOverlay').hide();
    let mdlNo = $('#content_num').val(); //get the stored mdl_data number
    //below line MOVES the dialog contents back to the appropriate storage div
    $('#myMdlInner .mdl_content').appendTo( $('#content_mdl' + mdlNo) );
});

#myOverlay{position:fixed;top:0;left:0;height:100%;width:100%;background:black;opacity:0.7;display:none;z-index:1;}

#myModal{position:fixed;top:10%;left:10%;width:70%;height:60%;border:3px solid darkcyan;overflow:hidden;display:none;z-index:2;}
  .mdl_content{height:100%;width:100%;background:white;}

#shutme{position:absolute;right:20px;bottom:20px;}

.flex-parent{display:flex;justify-content:center;align-items:center;}
.mdl_data{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>This demo re-uses one modal dialog for multiple content</h1>
<div id="myOverlay"></div>
<div id="myModal">
    <div id="myMdlInner"></div>
    <input type="button" id="shutme" value="Close" />
    <input type="hidden" id="content_num" />
</div>

<!-- Hidden divs containing content for the modal dialog -->
<div id="content_mdl1" class="mdl_data">
  <div class="mdl_content">
    <img src="http://placekitten.com/450/325" />
  </div><!-- .mdl_content -->
</div><!-- #content_mdl1 -->

<div id="content_mdl2" class="mdl_data">
  <div class="mdl_content">
    <div class="flex-parent">
        <div class="fleft">Some text goes here. Some text goes here. Some text goes here. </div>
        <div class="fright">
            <img src="http://placekitten.com/200/150" />
        </div>
    </div>
  </div><!-- .md2_content -->
</div><!-- #content_mdl2 -->

<button id="mybutt_1">Show Modal 1</button>
<button id="mybutt_2">Show Modal 2</button>

jsFiddle Demo

将 div 用作带有 jQuery 的模态对话框的最简单方法

Easiest way to use a div as a modal dialog with jQuery

jquery

modal-dialog