动画窗口关闭＆＃34; X＆＃34;旋转而不是旋转

时间：2016-03-23 19:56:55

标签： html css3

我创建了一个模态窗口，我希望窗口在右上角关闭x，以便在按下时进行动画和旋转。相反，它会在其基线上旋转，就像它的下落一样，而不是旋转。如果有人可以查看我的代码并查看我忽略的内容，我们将不胜感激。提前谢谢。

＆＃13;
＆＃13; 
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";
  }
}
＆＃13; 
.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;
}
＆＃13; 
<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" -->
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

你可以试试这个方法

我基本上把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

答案 1 :(得分：0)

首先，我建议不要使用字母“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" -->

相关问题
最新问题