使用div作为jQuery模式对话框的最简单方法 [英] 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.

请告诉我一种方法...

Please show me a way...

推荐答案

要自行创建"模式对话框，您只需要两个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 不适用于使用 默认 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).

位置对于对话框本身的HTML结构也很重要.同样，将其从默认值 position:static 更改. fixed 的位置值会将其放置在 屏幕 上的固定位置，而 absolute 允许您将其放置在第一个父元素中没有 static 值的第一个父元素中的任何位置(您可以看到讨厌的 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将overlay div配置为位于网页顶部.我们这样做有两个原因:(1)在视觉上很好地框住对话框；(2)防止用户在关闭对话框之前与页面进行交互.(记住: position:absolute 或 position:fixed )一个不错的效果是使用 opacity将div设为半透明 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.

使用z-index将对话框div配置为位于叠加层的顶部.不要将对话框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结构放置在主体的顶部或底部非常方便.不要将它们放在容器中.如果您使用的是Bootstrap，则 可以 使用此方法，但是由于

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演示

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