我想使用 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-index
不适用于使用 default CSS 位置值 (position:static
) 的元素。如果您不需要将元素设置为 absolute
或 fixed
,则将其设置为 position:relative
(实际上与默认 static
值相同,但也支持 z-index
)。
position
对于对话框本身的 HTML 结构也很重要。再次更改默认值 position:static
。位置值 fixed
会将其放置在 屏幕 上的固定位置,而 absolute
将允许您将其放置在第一个不具有 position
值 static
的父元素内的任何位置
(您可以看到讨厌的 position:static
值是有问题的 - 很奇怪为什么选择它作为默认值。
覆盖 div 使用 z-index 配置为位于网页顶部。我们这样做有两个原因:(1)在视觉上很好地构建对话框; (2) 阻止用户与页面交互,直到对话框关闭。 (记住:
position:absolute
或 position:fixed
) 一个不错的效果是使用 opacity
CSS 属性使这个 div 半透明。
对话框 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>