通过 jQuery 将 div 用作模态对话框的最简单方法 [英] Easiest way to use a div as a modal dialog with jQuery

问题描述

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

I want to show the contents of a div as a modal dialog using jQuery.

有什么方法可以在不使用 Bootstrap 或其他任何东西的情况下做到这一点...?

Is there any way to do it without using Bootstrap or anything else...?

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

I want to personalize my modal dialog, my own way, via CSS.

请给我指路...

推荐答案

要滚动你自己"的模态对话框，只需要两个 div:

To "roll-your-own" modal dialog, all you need are two divs:

1. 覆盖 - 位于页面内容的顶部(我们使用 z-index 来完成此操作)

对话框 - 位于覆盖 div 的顶部

The dialog - sits on top of the overlay div

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

Here is a basic code example.

$('#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 演示

重要提示:

1. z-index 不适用于使用 default CSS 位置值(position:静态).如果您不需要将元素设置为 absolute 或 fixed，则将其设置为 position:relative(实际上与默认的static值，也支持z-index).

1. z-index doesn't work on elements that are using the default CSS position value (position:static). If you don't need the element set to either absolute or fixed, then set it to position:relative (which is virtually the same as the default static value, but also supports z-index).

position 对于对话框本身的 HTML 结构也很重要.同样，将其从 position:static 的默认值更改.fixed 的位置值会将其放置在 屏幕 上的固定位置，而 absolute 将允许您将它定位在第一个父元素中没有 static 的 position 值的任何位置(您可以看到讨厌的 position:static 值是有问题 - 奇怪为什么它被选为默认值.

position is again important for the HTML structure of the dialog box itself. Again, change it from the default value of position:static. A position value of fixed will place it at a fixed location on the screen, whereas absolute will allow you to position it anywhere within the first parent element that does not have a position value of static (you can see that the pesky position:static value is problematic - it's a wonder why it was chosen to be the default.

使用 z-index 将覆盖 div 配置为位于网页顶部.我们这样做有两个原因:(1)在视觉上很好地框定对话框；(2) 防止用户在对话框关闭之前与页面交互.(记住:position:absolute 或 position:fixed) 一个不错的效果是使这个 div 半透明，使用 opacity CSS 属性.

The overlay div is configured, using z-index, to sit on top of the webpage. We do this for two reasons: (1) to nicely frame the dialog box, visually; and (2) to prevent the user from interacting with the page until the dialog box is closed. (Remember: position:absolute or position:fixed) A nice effect is to make this div semi-transparent, using the opacity CSS property.

对话框 div 使用 z-index 配置为位于叠加层的顶部.不要将对话框 div 放在覆盖 div 内.你可以这样做，但有点困难 - 先这样做，然后尝试其他可能性.

The dialog div is configured, using z-index, to sit on top of the overlay. Do not put the dialog div inside the overlay div. You can do this, but it is a little more difficult - do it this way first, then experiment with other possibilities.

将覆盖层和对话框 div 结构放置在 body 的最顶部或最底部都很方便.不要将它们放在容器中.如果您使用的是 Bootstrap，您可以使用此方法，但您不需要因为 Bootstrap 有自己的模态对话框结构，这使得配置一个超酷的模态对话框更容易一些.如果您仔细查看他们的 HTML，您会发现它与我们在这里使用的概念完全相同 - 它只是做得更多.

It's convenient to place the overlay and dialog div structures either at the very top of the body, or at the very bottom. Do NOT place them within containers. If you are using Bootstrap, you can use this method but you don't need to since Bootstrap has its own modal dialog structure that makes it a little easier to configure a super-cool modal dialog. If you look at their HTML closely, you'll see it's really exactly the same concept as we are using here - it just does more.

您不需要为每条消息使用单独的模式.在模态对话框结构中交换信息非常简单.有关更多想法和演示，请参阅此答案.

You do not need a separate modal for each message. It's pretty simple to swap information in and out of the modal dialog structure. See this answer for more ideas and demos.

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

In fact, this is a key idea so here is another example that shows how simple it is to do:

$('[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 演示

这篇关于通过 jQuery 将 div 用作模态对话框的最简单方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！