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

问题

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

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

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

Please show me a way...

回答1:

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

The overlay - sits on top of your page content (we use z-index to accomplish this)
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 Demo

Important Notes:

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 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.
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.
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.
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 Demo

来源：https://stackoverflow.com/questions/56796556/easiest-way-to-use-a-div-as-a-modal-dialog-with-jquery

标签

jquery

modal-dialog