淘先锋技术网

首页 1 2 3 4 5 6 7

今天我们来聊一下jQuery中的点击弹框事件,也就是常见的弹窗。在网页中,我们经常需要弹出一个小窗口,让用户输入一些信息、进行一些操作等。而jQuery中,提供了很多可用的方法来实现这个效果。接下来,我们来看看怎样实现点击弹框事件。


// 弹出框的HTML代码,它会默认隐藏
<div class="modal bottom-sheet">
  <div class="modal-content">
    <h4>请输入您的信息</h4>
    <p>姓名:<input type="text" name="name"></p>
    <p>电话:<input type="text" name="phone"></p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">关闭</a>
    <a href="#!" class="waves-effect waves-green btn-flat">提交</a>
  </div>
</div>

// 弹出框的调用
$(document).ready(function(){
  // 点击按钮弹出窗口
  $('.modal-trigger').click(function(){
    $('.modal').modal();
  });
});

jquery点击弹框事件

以上就是实现点击弹框事件的所有代码了。我们首先使用了一个类为“modal”的div来作为弹出框,在这个div中放置了需要显示的内容,包括一些文字和输入框。代码中,我们使用了一个类为“modal-trigger”的按钮来触发点击事件,当用户点击该按钮时,会将类为“modal”的div弹出并在网页中显示。据此,我们就可以轻松实现点击弹框事件了~