Rumah  >  Artikel  >  hujung hadapan web  >  Contoh kawalan lapisan terapung telefon mudah alih dengan js yang serasi dengan penyemak imbas PC dan dengan pelbagai kemahiran prompts_javascript pop timbul

Contoh kawalan lapisan terapung telefon mudah alih dengan js yang serasi dengan penyemak imbas PC dan dengan pelbagai kemahiran prompts_javascript pop timbul

WBOY
WBOYasal
2016-05-16 16:01:491190semak imbas

Contoh dalam artikel ini menerangkan kawalan lapisan terapung mudah alih yang serasi js dengan penyemak imbas PC dan mempunyai pelbagai petua pop timbul. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Penggunaan

<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>

Atau panggilnya menggunakan 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>

Warisi amaran kelas dan sahkan gesaan (dalam mod 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默认"/>

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();
  });
})

Sifat atau kaedah:

Atribut:

cetus:
Objek pencetus

sasaran:
Kandungan pop timbul boleh menjadi #id, atau objek jquery

topeng:
Sama ada terdapat lapisan topeng

tajuk:
Tajuk

zIndex:
indeks-z

closeTpl:
Tutup html (lalai:f2b54661cd0a6d5afc2f12b5e72067bex54bdf357c58b8a65c66d7c19c8e4d114)

tajukTpl:
Tajuk html (lalai: 9ca5b7b4c0ddc9dd9833efaf3c90649f16b28748ea4df4d9c2150843fecfba68)

Kaedah dan panggil balik:

tunjukkan:
Tunjukkan pop timbul

sembunyikan:
Sembunyikan

beforeShow: fungsi(kandungan)
Panggil balik kaedah sebelum paparan, kandungan ialah objek kandungan lapisan terapung

beforeHide:function(content)
Panggil balik kaedah sebelum menyembunyikan, kandungan ialah objek kandungan lapisan terapung

setPosition:function()
Tetapkan kedudukan ke tengah

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn