限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 弹出层

jquery支持自定义的提示框弹出层插件

所属分类： 网页特效-弹出层    2023-07-29 08:23:41

 7.3K  0  查看评论 (0)
jquery支持自定义的提示框弹出层插件 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

jquery支持自定义的提示框弹出层插件（共9个文件）

    • index.html

使用方法

  • code
  • source
  1. (function() {

  2.   const resultLog = document.getElementById('result_log');

  3.   const pageForm = document.getElementById('page_form');

  4.   const jsForm = document.createElement('form');

  5.   jsForm.classList.add('demo_form');

  6.   // jsForm.style.setProperty('width', '300px');

  7.   // jsForm.style.setProperty('margin', '10px');

  8.   // jsForm.style.setProperty('padding', '20px');

  9.   // jsForm.style.setProperty('border', '1px solid #000');

  10. 

  11.   const formOptions = {

  12.     title: 'Your favorite browser',

  13.     info: pageForm,

  14.     ok: () => {

  15.       getFormValue();

  16.     }, 

  17.     no: () => {},

  18.     // baseClass: '',

  19.   };

  20. 

  21.   document.getElementById('settings_form').addEventListener('change', (e) => {

  22.     const el = e.target;

  23.     const value = el.value;

  24.     const nodeName = el.nodeName.toLowerCase();

  25. 

  26.     if (['input', 'select'].indexOf(nodeName) >= 0) {

  27.       switch (el.name) {

  28.         case 'theme':

  29.           cxDialog.defaults.baseClass = value;

  30.           break;

  31. 

  32.         case 'title':

  33.           cxDialog.defaults.title = value == 1 ? 'cxDialog' : '';

  34.           break;

  35. 

  36.         case 'maskClose':

  37.           cxDialog.defaults.maskClose = Boolean(parseInt(value, 10));

  38.           break;

  39. 

  40.         case 'form':

  41.           formOptions.info = value === 'js' ? jsForm : pageForm;

  42.           break;

  43.       };

  44.     };

  45.   });

  46. 

  47.   document.body.addEventListener('click', (e) => {

  48.     const el = e.target;

  49.     const nodeName = el.nodeName.toLowerCase();

  50. 

  51.     if (nodeName === 'a' && el.rel) {

  52.       const rel = el.rel;

  53. 

  54.       switch (rel) {

  55.         case 'alert':

  56.           cxDialog('Hello World<br>I am cxDialog');

  57.           break;

  58. 

  59.         case 'ok':

  60.           cxDialog({

  61.             info: 'Get started with the <strong>cxDialog</strong>',

  62.             ok: () => {

  63.               addLog('OK');

  64.             }

  65.           });

  66.           break;

  67. 

  68.         case 'confirm':

  69.           cxDialog({

  70.             info: 'Get started with the <strong>cxDialog</strong>',

  71.             ok: () => {

  72.               addLog('OK');

  73.             },

  74.             no: () => {

  75.               addLog('Cancel');

  76.             },

  77.           });

  78.           break;

  79. 

  80.         case 'article':

  81.           const opts = {

  82.             info: Array(99).fill('Article Content'),

  83.             buttons: []

  84.           };

  85. 

  86.           opts.info.unshift('<div style="width:9999px;background:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,0.1) 100%);color:#fff;">Wider Content</div>');

  87.           opts.info = opts.info.join('<br>');

  88. 

  89.           for (let i = 0; i < 9; i++) {

  90.             opts.buttons.push({

  91.               text: 'Button' + i,

  92.               callback: () => {

  93.                 addLog('Button' + i)

  94.               }

  95.             });

  96.           };

  97. 

  98.           cxDialog(opts);

  99.           break;

  100. 

  101.         case 'text':

  102.           formOptions.info.innerHTML = '<div class="setvalue"><input name="name" type="text"></div>';

  103.           cxDialog(formOptions);

  104.           break;

  105. 

  106.         case 'radio':

  107.           createOptions('radio');

  108.           cxDialog(formOptions);

  109.           break;

  110. 

  111.         case 'checkbox':

  112.           createOptions('checkbox');

  113.           cxDialog(formOptions);

  114.           break;

  115. 

  116.         case 'login':

  117.           cxDialog(formOptions);

  118.           break;

  119.       };

  120.     };

  121.   });

  122. 

  123.   const createOptions = (type) => {

  124.     let now = new Date().getTime();

  125.     let html = '<div class="setvalue">';

  126. 

  127.     for (let x of ['Chrome','Edge','Firefox']) {

  128.       let id = x.toLowerCase() + now;

  129.       html += '<input type="' + type + '" name="name" id="' + id + '" value="' + x + '"><label for="' + id + '">' + x + '</label>';

  130.     };

  131. 

  132.     html += '</div>';

  133. 

  134.     formOptions.info.innerHTML = html;

  135.   };

  136. 

  137.   const getFormValue = () => {

  138.     const formData = new FormData(formOptions.info);

  139.     const values = [];

  140. 

  141.     for (let x of formData.entries()) {

  142.       if (x[0] === 'name') {

  143.         values.push(x[1]);

  144.       };

  145.     };

  146. 

  147.     addLog(values.join(','));

  148.   };

  149. 

  150.   const addLog = (text) => {

  151.     resultLog.insertAdjacentHTML('beforeend', text + '<br>')

  152.   };

  153. })();

(function() {
  const resultLog = document.getElementById('result_log');
  const pageForm = document.getElementById('page_form');
  const jsForm = document.createElement('form');
  jsForm.classList.add('demo_form');
  // jsForm.style.setProperty('width', '300px');
  // jsForm.style.setProperty('margin', '10px');
  // jsForm.style.setProperty('padding', '20px');
  // jsForm.style.setProperty('border', '1px solid #000');

  const formOptions = {
    title: 'Your favorite browser',
    info: pageForm,
    ok: () => {
      getFormValue();
    }, 
    no: () => {},
    // baseClass: '',
  };

  document.getElementById('settings_form').addEventListener('change', (e) => {
    const el = e.target;
    const value = el.value;
    const nodeName = el.nodeName.toLowerCase();

    if (['input', 'select'].indexOf(nodeName) >= 0) {
      switch (el.name) {
        case 'theme':
          cxDialog.defaults.baseClass = value;
          break;

        case 'title':
          cxDialog.defaults.title = value == 1 ? 'cxDialog' : '';
          break;

        case 'maskClose':
          cxDialog.defaults.maskClose = Boolean(parseInt(value, 10));
          break;

        case 'form':
          formOptions.info = value === 'js' ? jsForm : pageForm;
          break;
      };
    };
  });

  document.body.addEventListener('click', (e) => {
    const el = e.target;
    const nodeName = el.nodeName.toLowerCase();

    if (nodeName === 'a' && el.rel) {
      const rel = el.rel;

      switch (rel) {
        case 'alert':
          cxDialog('Hello World<br>I am cxDialog');
          break;

        case 'ok':
          cxDialog({
            info: 'Get started with the <strong>cxDialog</strong>',
            ok: () => {
              addLog('OK');
            }
          });
          break;

        case 'confirm':
          cxDialog({
            info: 'Get started with the <strong>cxDialog</strong>',
            ok: () => {
              addLog('OK');
            },
            no: () => {
              addLog('Cancel');
            },
          });
          break;

        case 'article':
          const opts = {
            info: Array(99).fill('Article Content'),
            buttons: []
          };

          opts.info.unshift('<div style="width:9999px;background:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,0.1) 100%);color:#fff;">Wider Content</div>');
          opts.info = opts.info.join('<br>');

          for (let i = 0; i < 9; i++) {
            opts.buttons.push({
              text: 'Button' + i,
              callback: () => {
                addLog('Button' + i)
              }
            });
          };

          cxDialog(opts);
          break;

        case 'text':
          formOptions.info.innerHTML = '<div class="setvalue"><input name="name" type="text"></div>';
          cxDialog(formOptions);
          break;

        case 'radio':
          createOptions('radio');
          cxDialog(formOptions);
          break;

        case 'checkbox':
          createOptions('checkbox');
          cxDialog(formOptions);
          break;

        case 'login':
          cxDialog(formOptions);
          break;
      };
    };
  });

  const createOptions = (type) => {
    let now = new Date().getTime();
    let html = '<div class="setvalue">';

    for (let x of ['Chrome','Edge','Firefox']) {
      let id = x.toLowerCase() + now;
      html += '<input type="' + type + '" name="name" id="' + id + '" value="' + x + '"><label for="' + id + '">' + x + '</label>';
    };

    html += '</div>';

    formOptions.info.innerHTML = html;
  };

  const getFormValue = () => {
    const formData = new FormData(formOptions.info);
    const values = [];

    for (let x of formData.entries()) {
      if (x[0] === 'name') {
        values.push(x[1]);
      };
    };

    addLog(values.join(','));
  };

  const addLog = (text) => {
    resultLog.insertAdjacentHTML('beforeend', text + '<br>')
  };
})();

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： cxdialog弹出层对话框对话窗口提示窗口
相关资源 / 弹出层
查看更多

jquery响应式弹出cookie同意提示框插件

 第一次访问网站页面时，此插件会在网站上显示cookie同意（数据收集策略）弹出窗口。
  弹出层
 1977  0

jquery手机移动端多模态弹出框插件

 一款移动端弹出层插件，包含了多模态：确认对话框、对话框、表单输入弹出框、loading加载动画等。
  弹出层
 9150  0

jquery带遮罩层的文字提示工具插件

 此插件包含了多种提示特效：自动触发、单击触发、鼠标悬停触发、鼠标悬停ajax回调触发等。
  弹出层
 1353  0

jquery响应式自动关闭的消息通知栏插件

 一款轻量级通知消息栏特效，点击右侧按钮触发底部弹出显示消息通知，可自定义时间消息或点击关闭。
  弹出层
 3338  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论，快来抢个沙发！
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论