jQuery彈出並轉換div元素

Question

我有一個下面創建的表單，我想用它代替提示框。 我想使它彈出並在負載上帶有橡皮筋效果，然后當用戶單擊“確認”時，它將輸入存儲在我在javascript文件中具有的變量中，並且3D在z軸上平移以略微增長（似乎朝屏幕），因為它向左過渡並縮小到略小於原始尺寸。 我不知道如何實現這一目標。 有人能幫我嗎？

<form id="player-one" onsubmit="return false;">
    <input type="text" class="form-control" placeholder="Player : : 1">
    <button type="submit" class="btn btn-default">
        Confirm
    </button>
</form>

Answer 1

我滿足了您約80％的需求，但我不知道您所說的最后一個影響是什么。

只要您可以向我顯示類似的內容或對其進行更好的解釋，我就會更新答案。

看下面的例子。

 document.addEventListener('DOMContentLoaded', function() { var popup = document.getElementById('language-popup'); popup.classList.add('animated', 'bounceIn'); document.querySelector('a.close').addEventListener('click', function(e) { popup.classList.add('hidden'); }); document.getElementById('player-one').addEventListener('submit', function(e) { e.preventDefault(); popup.classList.add('animated', 'zoomoutdown'); var txt = document.getElementById('txtPlayerOne'); // use the txt.value to store it to the variable you want }); }); 

 .hidden { display: none; } #language-popup { background-color: #AAAAFF; font-family: Verdana; padding: 12px; border-radius: 10px; width: 300px; height: 150px; position: absolute; top: 50px; } #language-popup h3 { text-align: center; } #language-popup ul { list-style-type: none; } #language-popup a { text-decoration: none; color: black; } #language-popup a:hover { text-decoration: underline; } #language-popup .close { float: right; } #language-popup .close:hover { text-decoration: none; } #language-popup .close:after { content: '✖'; cursor: pointer; } .animated { animation-duration: 1s; animation-fill-mode: both; } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @keyframes zoomoutdown { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomoutdown { animation-name: zoomoutdown; } 

 <div id="language-popup"> <a class='close'></a> <h3>Player</h3> <form id="player-one"> <input id="txtPlayerOne" type="text" class="form-control" placeholder="Player : : 1"> <input type="submit" class="btn btn-default" value='Confirm' /> </form> </div>