我想在我正在创建的网站上为模式框制作最小化,最大化和关闭按钮。我希望它们看起来像我的网站上的Windows 7窗口按钮。我试过在网上寻求帮助,但没有一个网站给了我我想要的东西。请帮我构建按钮并使用它们。
您最好的选择是模态库或具有模态的框架(例如bootstrap)。
但是,如果你坚持自己做,那么这样的事情就会让你开始。关键点是:
jQuery(document).ready(function($){
$(document).on('click', '.min', function(){
$(this).closest('.modal').find('.content').slideUp();
$(this).closest('.modal').animate({'left':0,'bottom':0});
});
$(document).on('click', '.max', function(){
$(this).closest('.modal').find('.content').slideDown();
$(this).closest('.modal').animate({'left':'20px','bottom':'50%'});
});
$(document).on('click', '.close', function(){
$(this).closest('.modal').fadeOut();
});
});
.shield {
position: absolute;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.25);
top: 0;
left: 0;
font-family: sans-serif;
}
.modal {
position: absolute;
bottom: 50%;
left: 20px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 15px -5px rgba(0,0,0,.5);
width: 600px;
}
.modal .header {
padding: 8px 12px;
position: relative;
}
.modal .header .buttons {
position: absolute;
right: 0;
top: 9px;
}
.modal .header .buttons span {
border-left: 1px solid #ccc;
padding: 8px 20px;
cursor: pointer;
}
.modal .header .buttons span:hover {
background: #eee;
}
.modal .content {
border-top: 1px solid #ccc;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h1>Here's Content</h1>
<p>Under the modal</p>
<p>Under the modal</p>
<p>Under the modal</p>
<p>Under the modal</p>
</div>
<div class="shield">
<div class="modal">
<div class="header">
<span>Modal Window</span>
<span class="buttons"><span class="min">_</span><span class="max">[ ]</span><span class="close">X</span></span>
</div>
<div class="content">
Here's modal pop-up content
</div>
</div>
</div>