使用 div 作为 jQuery 模式对话框的最简单方法

问题描述 投票:0回答:1

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

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

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

请告诉我一条路...

jquery modal-dialog
1个回答
3
投票

要“自行推出”模式对话框,您只需要两个 div:

  1. 叠加层 - 位于页面内容之上(我们使用

    z-index
    来完成此操作)

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

2023 年更新:这是我现在的做法:

const $ = document.querySelector.bind(document);

$('#myButt').addEventListener('click', () => {
  $('#modal').style.display = 'flex';
});

$('#modal_inner').addEventListener('click', e => {
  if (e.target.id === 'closeX'){
     $('#modal').style.display = 'none';
  }
});

$('#yourButt').addEventListener('click', () => {
  $('#modal_inner').innerHTML = '<div id="closeX"> X </div><h2>A Different Quote</h2><p>Yesterday it was so hot that I saw two trees fighting over a dog.</p>';
});
.flex-center-center{display:flex;align-items:center;justify-content:center;}
.flex-column {flex-direction:column;}
.pos-abs-full{position:absolute;top:0;left:0;width:99.5vw;height:100vh}

*{position:relative;box-sizing:border-box;font-family:'Segoe UI Light', Arial, Helvetica;}
#modal{background:#000000cc;display:none;}
  #modal_inner{width:60vw;padding:0 20px 20px; color:darkcyan;background:#fff;border:1px solid #999; }
     #closeX{position:absolute;top:0;right:0;padding:2px 8px;color:darkcyan;}
     #closeX:hover{color:lawngreen;cursor:pointer;}
     
span{color:dodgerblue;}
<h1>Pure JavaScript (Full Page) Example</h1>
<p>This is an example of a modal dialog, and of how easy it is to change the content.</p>
<p>This new example is pure javascript - no jQuery</p>
<p>The $ <span>looks like</span> jQuery, but it is just a pure-javascript alias for <span>querySelector()</span>.</p>
<button id="myButt">Click for Modal</button>

<div id="modal" class="pos-abs-full flex-center-center">
   <div id="modal_inner" class="flex-center-center flex-column">
      <div id="closeX"> X </div>
      <h2>This is the Modal content</h2>
      <div>You can tell a genius by this sign: that all the dunces are in a confederacy against him.</div>
      <p>Bertie! Get a haircut! You look like a chrysanthemum.</p>
      <button id="yourButt">Switch Content</button>
   </div>
</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 演示


重要提示:

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

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

  3. 覆盖 div 使用 z-index 配置为位于网页顶部。我们这样做有两个原因:(1)在视觉上很好地构建对话框; (2) 阻止用户与页面交互,直到对话框关闭。 (记住:

    position:absolute
    position:fixed
    一个不错的效果是使用
    opacity
    CSS 属性使这个 div 半透明。

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

  5. 将覆盖层和对话框 div 结构放置在主体的最顶部或最底部很方便。请勿将它们放入容器内。如果您使用 Bootstrap,您可以使用此方法,但您不需要这样做,因为Bootstrap有自己的模式对话框结构,这使得配置超酷的模式对话框变得更容易。如果您仔细查看他们的 HTML,您会发现它与我们在这里使用的概念完全相同 - 它只是做了更多事情。

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

事实上,这是一个关键想法,所以这里是另一个例子,展示了它是多么简单:

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

© www.soinside.com 2019 - 2024. All rights reserved.