我想使用 jQuery 将 div 的内容显示为模式对话框。
有什么方法可以在不使用 Bootstrap 或其他任何东西的情况下做到这一点......？
我想通过 CSS 以我自己的方式个性化我的模式对话框。
请告诉我一条路...
要“自行推出”模式对话框，您只需要两个 div：
叠加层 - 位于页面内容之上（我们使用
z-index对话框 - 位于覆盖 div 的顶部
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>重要提示：
z-indexposition:staticabsolutefixedposition:relativestaticz-indexpositionposition:staticfixedabsolutepositionstatic 的父元素内的任何位置position:static覆盖 div 使用 z-index 配置为位于网页顶部。我们这样做有两个原因：（1）在视觉上很好地构建对话框； (2) 阻止用户与页面交互，直到对话框关闭。 （记住：
position:absoluteposition:fixedopacity对话框 div 使用 z-index 配置为位于覆盖层的顶部。不要将对话框 div 放在覆盖 div 内。你可以这样做，但是有点困难 - 首先这样做，然后尝试其他可能性。
将覆盖层和对话框 div 结构放置在主体的最顶部或最底部很方便。请勿将它们放入容器内。如果您使用 Bootstrap，您可以使用此方法，但您不需要这样做，因为Bootstrap有自己的模式对话框结构，这使得配置超酷的模式对话框变得更容易。如果您仔细查看他们的 HTML，您会发现它与我们在这里使用的概念完全相同 - 它只是做了更多事情。
您不需要为每条消息使用单独的模式。在模式对话框结构中交换信息非常简单。请参阅此答案了解更多想法和演示。
事实上，这是一个关键想法，所以这里是另一个例子，展示了它是多么简单：
$('[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>