动画窗口关闭"X"旋转而不是旋转

我创建了一个模态窗口，我希望右上角的窗口关闭x，以便在按下时设置动画和旋转。相反，它在基线上旋转，就像它在下降一样，而不是旋转。如果有人能看看我的代码，看看我忽略了什么，我将不胜感激。提前谢谢。

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
  background-color: #E4E8F1;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  -ms-border-radius: 25px;
  border-radius: 15px;
}
.modal-content > div {
  background-color: #FFF;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  -ms-border-radius: 25px;
  border-radius: 15px;
  padding: 5px;
  border: 1px solid #CC6600;
}
.close {
  width: 30px;
  height: 30px;
  padding: 5px;
  display: inline-block;
  float: right;
  margin-top: -20px;
  margin-right: -20px;
  transition: ease 0.25s all;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  background: rgba(0, 0, 0, 0.8);
  font-family: Arial, Sans-Serif;
  font-size: 20px;
  text-align: center;
  line-height: 100%;
  color: #fff;
}
.close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
  transform: translate(50%, -50%) rotate(180deg);
  background: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  color: #999;
  cursor: pointer;
}

<div class="btnBox">
  <button id="myBtn">Ordering Information</button>
</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div>
      <span class="close">x</span>
      <p class="heading-modal noIndent">Ordering Information</p>
      <p class="text"> For additional information or to order, send a written request, including name, address, and payment if required, to:</p>
      <ul>
        <li class="address">South Carolina Department of Transportation</li>
        <li class="address">Engineering Publications</li>
        <li class="address">Attention: </li>
        <li class="address">Post Office Box</li>
        <li class="address">Columbia, South Carolina</li>
        <li class="address">Telephone: (000)000-0000</li>
        <li class="address">Fax: (000)000-0000</li>
      </ul>
      <p class="text">Items may be purchased over-the-counter at the Engineering Publication Sales Center, in the SCDOT Headquarters Building, 955 Park Street, Columbia, South Carolina.</p>
      <p class="text">SCDOT will accept cash, check (make payable to SCDOT), money order (make payable to SCDOT), and credit card (Visa & Mastercard only). Payment must be received before items can be shipped. </p>
      <p class="text">The <a href="http://www.scdot.org/doing/constructionLetting_HighwayDesign.aspx">Highway Design Manual</a> assists technicians and engineers in selecting the needed design criteria in preparing plans for SCDOT construction projects. </p>
    </div>
  </div>
  <!-- modal-content -->
</div>
<!-- id="myModal" class="modal" -->

首先，我建议不要使用字母"x"来结束，而是使用更常见的乘法符号。

&times;

将关闭按钮的位置更改为使用position:absolute;而不是使用变换。

从关闭按钮中删除了float:right。

添加到父模式内容position:relative;

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
  background-color: #E4E8F1;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  -ms-border-radius: 25px;
  border-radius: 15px;
  position:relative;
}
.modal-content > div {
  background-color: #FFF;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  -ms-border-radius: 25px;
  border-radius: 15px;
  padding: 5px;
  border: 1px solid #CC6600;
}
.close {
  width: 30px;
  height: 30px;
  padding: 5px;
  display: inline-block;
  transition: ease 0.25s all;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.8);
  font-family: Arial, Sans-Serif;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
  color: #fff;
      position: absolute;
    top: -20px;
    right: -20px;
}
.close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
  transform:rotate(180deg);
  background: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  color: #999;
  cursor: pointer;
}

<div class="btnBox">
  <button id="myBtn">Ordering Information</button>
</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div>
      <span class="close">&times;</span>
      <p class="heading-modal noIndent">Ordering Information</p>
      <p class="text"> For additional information or to order, send a written request, including name, address, and payment if required, to:</p>
      <ul>
        <li class="address">South Carolina Department of Transportation</li>
        <li class="address">Engineering Publications</li>
        <li class="address">Attention: </li>
        <li class="address">Post Office Box</li>
        <li class="address">Columbia, South Carolina</li>
        <li class="address">Telephone: (000)000-0000</li>
        <li class="address">Fax: (000)000-0000</li>
      </ul>
      <p class="text">Items may be purchased over-the-counter at the Engineering Publication Sales Center, in the SCDOT Headquarters Building, 955 Park Street, Columbia, South Carolina.</p>
      <p class="text">SCDOT will accept cash, check (make payable to SCDOT), money order (make payable to SCDOT), and credit card (Visa & Mastercard only). Payment must be received before items can be shipped. </p>
      <p class="text">The <a href="http://www.scdot.org/doing/constructionLetting_HighwayDesign.aspx">Highway Design Manual</a> assists technicians and engineers in selecting the needed design criteria in preparing plans for SCDOT construction projects. </p>
    </div>
  </div>
  <!-- modal-content -->
</div>
<!-- id="myModal" class="modal" -->

好吧，你可以试试这个方法

我基本上已经将X与其他隔离开来

<span class="close"><span class="x">x</span></span>

使用这个CSS

.x{
  display:block;
    transition: ease 1.25s all;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.x:hover{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  text-decoration: none;
  color: #999;
  cursor: pointer;
}

https://codepen.io/Rohithzr/pen/ZWKrzZ

相关内容

最新更新

热门标签：