基于jQuery+CSS3點擊動畫彈出表單代碼

2024-04-27 15:01:01

字體：大中小

來源：轉載

供稿：網友

分享一款基于jQuery+CSS3點擊動畫彈出表單代碼是一款鼠標點擊圖標按鈕動畫彈出表單特效代碼。效果圖如下：

在線預覽源碼下載

實現的代碼。

html代碼：

<div class="buttonCollection">       <div class="qutton" id="qutton_upload">           <div class="qutton_dialog" id="uploadDialog">               <h2>上傳</h2>               <div class="urlField">                   <input type="text" id="fileUrl" placeholder="文件地址" />               </div>               <div id="button_basic_upload">選擇文件</div>           </div>       </div>        <div class="qutton" id="qutton_delete">           <div class="qutton_dialog" id="deleteDialog">               <h2>確定？</h2>               <div id="button_basic_confirm_delete">確定刪除</div>           </div>       </div>        <div class="qutton" id="qutton_comment">           <div class="qutton_dialog" id="commentDialog">               <textarea name="comment" id="commentInput" placeholder="你的評論..."></textarea>               <div id="button_basic_submit_comment">發送</div>           </div>       </div>   </div>

js代碼：

$(function () {           var quttonUpload = Qutton.getInstance($('#qutton_upload'));           quttonUpload.init({               icon: 'images/icon_upload.png',               backgroundColor: '#917466'           });            var quttonDelete = Qutton.getInstance($('#qutton_delete'));           quttonDelete.init({               icon: 'images/icon_delete.png',               backgroundColor: "#eb1220"           });            var quttonComment = Qutton.getInstance($('#qutton_comment'));           quttonComment.init({               icon: 'images/icon_comment.png',               backgroundColor: "#41aaf1"           });       });