zoukankan      html  css  js  c++  java
  • 点击对应不同name的button,显示不同name的弹窗(弹窗功能)

    (通过html5方法自定义属性选择,因此会有兼容性,此方法可适用移动端)

    buttonname,与弹窗的name设为变量,作为参数传递。

    Buttonname可以是自定义name,HTML5自定义属性data-*  

    弹窗的idbuttondata-* 属性值相同。

    通过在每个button上加上共同的classname即想通过选取共有的classname绑定click事件。

    Click事件里头获取data-*的属性值,例如 

    $('.modal-button').click(function(event) {

      var modal = $(this).data('modal');

      showModal(modal);//弹窗显示调用

    });

    var showModal = function(modal){

      $thpop=$('#'+modal);

      centerModal($thpop);//居中函数调用

      $thpopmask.show(); //阴影层

    }

    // 居中函数

    function centerModal(obj) {

      /*定义弹出居中窗口的方法*/

      windowHeight = $(window).height();//获取窗口高度

      windowWidth = $(window).width();//获取窗口宽度

      popWidth = obj.width();//获取弹窗宽度

      popHeight = obj.height();//获取弹窗高度

      //计算弹出窗口的左上角Y的偏移量

      var popY = (windowHeight - popHeight)/2;

      var popX = (windowWidth - popWidth)/2;

      //设定窗口的位置

      obj.css("top",popY+"px").css("left",popX+"px");

  • 相关阅读:
    第八周上机作业
    第七周课后作业
    第七周上机作业
    第六周课后作业
    第六周上机
    第九周JAVA
    第八周JAVA
    第8次JAVA作业
    第七周JAVA
    第7周JAVA
  • 原文地址:https://www.cnblogs.com/clear93/p/5210093.html
Copyright © 2011-2022 走看看