Maison  >  Article  >  interface Web  >  Explication détaillée d'exemples d'ouverture et de fermeture de couches contextuelles à l'aide de jQuery et de layer

Explication détaillée d'exemples d'ouverture et de fermeture de couches contextuelles à l'aide de jQuery et de layer

小云云
小云云original
2018-05-24 14:21:213115parcourir

Cet article présente principalement jQuery et layer pour réaliser les fonctions d'ouverture et de fermeture du calque pop-up. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Ouvrez le calque contextuel :

Apportez layer.js sur la page de liste

Lorsque vous cliquez sur la page de liste, le calque contextuel du formulaire apparaît, liste .js :

$(".add_category,.update").click(function(){  
    //弹出框  
    var doMain = $('.domain_name').val();  
    layer.open({  
      shade: [0.5, '#000', false],  
      type: 2,  
      area: ['900px', '530px'],  
      fix: false, //不固定  
      maxmin: true,  
      title: ['添加或修改用户类型', false],  
      content: doMain+"/Stat/QueryUserCategoryForm.action?adminUserCategory.id="+$(this).val()  
    });  
  });

Lorsque vous cliquez sur le bouton "Enregistrer" sur la couche contextuelle du formulaire, si les données sont enregistrées avec succès, la couche contextuelle sera fermée et la page de liste sera actualisée :

<span style="color:#000099;">submitHandler: function (form){  
      $.post(  
        $(&#39;.domain_name&#39;).val()+"/Stat/AddOrUpdateUserCategory.action",  
        $(form).serialize(),  
        function(data){  
          var result = eval("("+data+")");  
          if(!result.status){  
            alert(result.message);  
          }else{  
            //添加数据成功,关闭弹出窗之前,刷新列表页面的数据  
            parent.window.location.href=$(&#39;.domain_name&#39;).val()+"/Stat/QueryUserCategoryListStat.action";  
            </span><span style="color:#ff6666;"> var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  
            parent.layer.close(index); </span><span style="color:#000099;"> 
          }  
        }  
      );  
    } </span>

Recommandations associées :

Explication détaillée de l'utilisation du plug-in ThickBox de la couche contextuelle Jquery

js implémentation de la fermeture du code de fonction de fenêtre de la couche contextuelle js

implémentation jQuery du clic Fermer l'effet de la couche contextuelle à n'importe quelle position en dehors de la couche contextuelle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn