快捷導(dǎo)航

基于jquery css3實(shí)現(xiàn)點(diǎn)擊動(dòng)畫彈出表單源碼特效

更新時(shí)間：2015年08月31日 17:22:32 投稿：mrr

這篇文章主要介紹了基于jquery css3實(shí)現(xiàn)點(diǎn)擊動(dòng)畫彈出表單,彈出的表單沒有任何遮蓋層，在web前端程序開發(fā)中經(jīng)常會(huì)用到，需要的朋友可以參考下

下圖給大家展示了使用jquery css實(shí)現(xiàn)的點(diǎn)擊動(dòng)畫彈出表單源碼，有上傳表單、刪除表單、發(fā)送評(píng)論表單，都是通過鼠標(biāo)點(diǎn)擊圖標(biāo)按鈕動(dòng)畫彈出的表單源碼特效。

效果圖展示如下：

在線預(yù)覽源碼下載

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="你的評(píng)論..."></textarea>
  <div id="button_basic_submit_comment">發(fā)送</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"
  });
 });

您可能感興趣的文章:

相關(guān)文章

JQuery給網(wǎng)頁更換皮膚的方法
這篇文章主要介紹了JQuery給網(wǎng)頁更換皮膚的方法,用到了jQuery頁面元素獲取、樣式及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下
2015-05-05
JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼
這篇文章主要介紹了JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼的相關(guān)資料,這里附有實(shí)現(xiàn)實(shí)例代碼，具有一定的參考價(jià)值，需要的朋友可以參考下
2016-12-12
EasyUI實(shí)現(xiàn)二級(jí)頁面的內(nèi)容勾選的方法
在使用EasyUI的時(shí)候，我們經(jīng)?；赜龅皆诙?jí)頁面進(jìn)行勾選的時(shí)候，這里給大家分享一個(gè)比較簡單實(shí)用的實(shí)現(xiàn)方法，希望大家能夠喜歡。
2015-03-03
jquery動(dòng)態(tài)改變form屬性提交表單
在js中動(dòng)態(tài)改變form的屬性，滿足不同條件的form提交需求，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-06-06
javascript中對(duì)Attr(dom中屬性)的操作示例講解
這篇文章主要是對(duì)javascript中對(duì)Attr(dom中屬性)的操作進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
jQuery 網(wǎng)易相冊(cè)鼠標(biāo)移動(dòng)顯示隱藏效果實(shí)現(xiàn)代碼
顯示隱藏效果的實(shí)現(xiàn)主要是jquery層選擇器的應(yīng)用：當(dāng)鼠標(biāo)移動(dòng)經(jīng)過照片就顯示設(shè)為封面刪除，移開后就隱藏，此效果在web開發(fā)中經(jīng)常會(huì)用到，感興趣的朋友可以參考下哈
2013-03-03
基于jquery的拖動(dòng)布局插件
基于jquery的拖動(dòng)布局插件，需要的朋友可以參考下。
2011-11-11
jquery的 filter()方法使用教程
filter() 方法返回符合一定條件的元素。該方法讓您規(guī)定一個(gè)條件。不符合條件的元素將從選擇中移除，符合條件的元素將被返回。這篇文章主要介紹了 jquery的 filter()方法使用,需要的朋友可以參考下
2018-03-03
基于Jquery的實(shí)現(xiàn)回車鍵Enter切換焦點(diǎn)
系統(tǒng)默認(rèn)情況下，使用Tab按鍵切換頁面元素的焦點(diǎn)，有沒有想過回車鍵Enter也可以實(shí)現(xiàn)這種功能，并且具有良好的用戶體驗(yàn)。
2010-09-09
jQuery實(shí)現(xiàn)切換頁面布局使用介紹
在很多網(wǎng)站尤其在一些購物網(wǎng)站上，展示商品的列表頁提供了許多商品，用戶可以選擇商品的展示方式如列表方式展示和櫥窗方式展示等。在本例中，將給您講述如何實(shí)現(xiàn)這種效果
2011-10-10