你如何使用 CSS 为我的网站制作最小化、最大化和关闭按钮

debugcn 发表于 Dev

阿文·鲍恩

我想在我创建的网站上为模态框制作最小化、最大化和关闭按钮。我希望它们看起来像我网站上的 Windows 7 窗口按钮。我试过在网上搜索帮助，但没有一个网站给了我想要的东西。请帮助我构建按钮并使用它们。

欣克

你最好的选择是一个模态库或一个包含模态的框架（例如引导程序）。

但是，如果您坚持自己制作，这样的事情会让您开始。这其中的关键点是：

您需要一个具有与内容分开的“标题”的模态
您需要 JavaScript（jQuery 将在这方面有所帮助）来控制动画
这是我拼凑起来的东西，但这些原则将适用于您构建的任何东西
- 最小化需要隐藏内容，而不是标题
- 最大化需要显示内容，而不是标题
- 理想情况下，两个按钮都应该有一个点击动画，以显示模态在位置上的位置。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。