Maison > interface Web > js tutoriel > Exemples de contrôles de couche flottante pour téléphone mobile avec js compatibles avec les navigateurs PC et avec diverses compétences pop-up prompts_javascript

Exemples de contrôles de couche flottante pour téléphone mobile avec js compatibles avec les navigateurs PC et avec diverses compétences pop-up prompts_javascript

WBOY
Libérer: 2016-05-16 16:01:49
original
1259 Les gens l'ont consulté

L'exemple de cet article décrit un contrôle de couche flottante mobile qui est compatible js avec les navigateurs PC et propose une variété de conseils contextuels. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

Utilisation

<input type="button" id="btn_dialog" value="打开浮层"/>
<div id="dialog-content" style="display:none;">这是内容</div>
<script src="../src/jquery-1.9.1.min.js"></script>
<script src="../src/dialog.js"></script>
<script>
 var dialog = new Dialog();
 dialog.init({target:"#dialog-content",trigger:"#btn_dialog",mask:true,width:500,height:300,title:'标题'});
</script>
Copier après la connexion

Ou appelez-le en utilisant jquery :

<input type="button" id="btn_dialogjquery" value="jq打开浮层"/>
<div id="dialog-contentjq" style="display:none;">这是内容22</div>
<script src="../src/dialog-jquery.js"></script>
<script>
 $('#btn_dialogjquery').Dialog({target:"#dialog-contentjq",mask:true,width:500,height:300,title:'标题'})
</script>
Copier après la connexion

Hériter de l'alerte de classe et confirmer les invites (en mode jquery) :

html :

<input type="button" id="btn_alert" value="alert"/>
<input type="button" id="btn_alert2" value="alert定时关闭"/>
<input type="button" id="btn_confirm" value="confirm三种按钮"/>
<input type="button" id="btn_confirmdefault" value="confirm默认"/>
Copier après la connexion

js :

$('#btn_alert').click(function(){
  $.alert('选好商品才能上传素材哦',true,function(){
   alert('你点击了ok')
  })
});
$('#btn_alert2').click(function(){
  $.alert('选好商品才能上传素材哦')
});
$('#btn_confirm').click(function(){
  $.confirm('下载全部 9 张图片至本地相册&#63;<div class="confirm-title2">文字内容已复制</div>',[{yes:"是"},{no:'否'},{close:'关闭'}],function(type){
   $.alert('您点击了'+type);
   this.hide();
  });
})
$('#btn_confirmdefault').click(function(){
  $.confirm('你确定要删除这条消息吗&#63; ',null,function(type){
   $.alert('您点击了'+type);
   this.hide();
  });
})
Copier après la connexion

Propriétés ou méthodes :

Attributs :

déclencheur :
Objet déclencheur

cible :
Le contenu contextuel peut être #id ou un objet jquery

masque :
S'il y a une couche de masque

titre :
Titre

zIndex :
indice z

fermerTpl :
Fermer le HTML (par défaut :x)

titreTpl :
Titre html (par défaut :

)

Méthodes et rappels :

afficher :
Afficher la fenêtre contextuelle

cacher :
Cacher

beforeShow : fonction (contenu)
Rappel de méthode avant affichage, le contenu est l'objet de contenu de la couche flottante

avantMasquer:fonction(contenu)
Rappel de méthode avant de le masquer, le contenu est l'objet de contenu de la couche flottante

setPosition:fonction()
Réglez la position au centre

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal