Question

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

有没有不用Bootstrap或其他任何方法的方法吗？

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

请告诉我一种方法...

Answer 1

要“自行创建”模式对话框，您只需要两个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不适用于使用默认 CSS位置值（position:static）的元素。如果不需要将元素设置为absolute或fixed，则将其设置为position:relative（实际上与默认static相同，但也支持z-index）。
position对于对话框本身的HTML结构也很重要。同样，将其更改为默认值position:static。位置值fixed会将其放置在屏幕上的固定位置，而absolute则允许您将其放置在第一个没有position值static的父元素（您会看到讨厌的position:static值是有问题的-这很好奇，为什么选择它作为默认值。
使用z-index将overlay div配置为位于网页顶部。我们这样做有两个原因：（1）直观地框住对话框；（2）防止用户在关闭对话框之前与页面进行交互。 （记住：position:absolute或position:fixed）一个不错的效果是使用opacity CSS属性将该div设为半透明。
使用z-index将对话框div配置为位于叠加层的顶部。不要将对话框div放在叠加div中。您可以这样做，但要困难一些-首先以这种方式进行，然后尝试其他可能性。
将覆盖和对话框div结构放置在主体的顶部或底部非常方便。不要将它们放在容器中。如果您使用的是Bootstrap，则可以使用此方法，但是您无需使用Bootstrap has its own modal dialog structure，因为这样会使配置超酷配置更加容易模态对话框。如果仔细观察他们的HTML，您会发现它的概念与我们在这里使用的完全相同-它所做的更多。
您不需要为每个消息使用单独的模式。在模态对话框结构中交换信息非常简单。有关更多的想法和演示，请参见this answer。

实际上，这是一个关键思想，因此下面的另一个示例说明了这样做的简单性：

$('[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模式对话框的最简单方法

1 个答案: