Realize click animation pop-up form source code special effects based on jquery css3_jquery

The picture below shows you the click animation pop-up form source code implemented using jquery css. There are upload forms, delete forms, and send comment forms. They are all form source code special effects that pop up by clicking the icon button animation with the mouse.

The renderings are shown below:

Online preview Source code download

html code:

<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 code:

$(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"
  });
 });