Animasyonlu Pencereyi Kapatın "X" Döndürme yerine Döndürme

Question

Modal bir pencere oluşturdum ve basıldığında, ekranın sağ üst köşesinde x'in kapanmasını ve dönmesini istedim. Bunun yerine, taban çizgisinde, düşme, dönme gibi dönüyor. Birisi benim koduma bakıp neyi gözden kaçırdığımı görebilseydi takdir et. şimdiden teşekkürler.

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" -->

Answer 1

Her şeyden önce kapanış için "x" harfini kullanmamanızı öneririz, ancak bunun yerine daha yaygın çarpma işaretini kullanın.

× 

kapatma düğmesi konumlandırılması position:absolute; ile yerine dönüşümü yapılabilir değiştirilmedi.

Kapat düğmesinden kaldır float:right.

iyi ebeveyn modal-içerik 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" -->

Answer 2

de sen

i temelde bu 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; 

} 

ile her şey

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

gelen X tenha olan bu yöntemi deneyebilirsiniz

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