快捷導(dǎo)航

jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話(huà)框效果(2)

更新時(shí)間：2022年03月30日 15:17:52 作者：守護(hù)_瀟瀟

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話(huà)框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)彈出對(duì)話(huà)框的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

首先，這里的引用jquery-1.4.4.min.js和jquery.XYTipsWindow.min.2.8.js這兩個(gè)js，還有一個(gè)jquery.XYTipsWindow.2.8.css話(huà)不多說(shuō)，這里直接上代碼，留著以后備用。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無(wú)標(biāo)題文檔</title> 
<!--使用對(duì)畫(huà)框需要的兩個(gè)js--> 
 <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script> 
 <script type="text/javascript" src="../js/jquery.XYTipsWindow.min.2.8.js"></script> 
<link href="../css/jquery.XYTipsWindow.2.8.css" rel="external nofollow" type="text/css" rel="stylesheet" /> 
<script type="text/javascript"> 
 $(document).ready(function() { 
  
 $("#change").click(function(){ 
 
  $.XYTipsWindow({ 
   ___title:"修改密碼", 
   ___boxID:"change_pwd", 
   ___content:"id:pwd", 
   ___width:"200", 
   ___height:"100", 
   ___showbg:true, 
   ___drag:"___boxTitle" 
    
  }); 
   
  
 }); 
  
 $("#no").click(function(){ 
  //alert("ss"); 
  $.XYTipsWindow.removeBox(); 
  }); 
   
 $("#ok").click(function(){ 
  //alert("ss"); 
  $.XYTipsWindow.removeBox(); 
  //獲取input的值 
  //$(".newpwd").val() 
  }); 
   
   
  
  
 }) 
 </script> 
 
</head> 
 
<body style="text-align:center; padding-top:100px;"> 
<button id="change">修改密碼</button> 
<div id="pwd"><div class="input"><input class="newpwd" value="請(qǐng)輸入" stylr="color:gray;" onfocus="javascript:if(this.value == '請(qǐng)輸入') this.value='';this.style.color='#00CCCC';" 
onblur="javascript:if(this.value == '') this.value='請(qǐng)輸入';this.style.color='gray';"/></div> 
<div class="button"> 
<input id="ok" type="button" value="確定"/> 
<input id="no" type="button" value="取消"/> 
</div> 
</div> 
<style type="text/css"> 
 #pwd{ 
 display:none; 
 } 
  
 .button{ 
 margin-bottom:10px; 
 padding-top:10px; 
 } 
 .newpwd{ 
 margin:10px; 
 border:1px thin; 
 } 
</style> 
</div> 
</body> 
</html>

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery瀑布流插件Wookmark使用實(shí)例
Wookmark jQuery插件大致使用position:absolute來(lái)重構(gòu)內(nèi)容實(shí)現(xiàn)瀑布流布局,需要的朋友可以參考下
2014-04-04
jQuery.clean使用方法及思路分析
jQuery.clean源碼分析包括：jQuery.clean使用方法、思路分析及源碼注釋分析感興趣的朋友可以參考下
2013-01-01
有關(guān)jquery與DOM節(jié)點(diǎn)操作方法和屬性記錄
下面小編就為大家?guī)?lái)一篇有關(guān)jquery與DOM節(jié)點(diǎn)操作方法和屬性記錄。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-04-04
validationEngine 表單驗(yàn)證插件使用實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了jquery validationEngine 表單驗(yàn)證插件效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-06-06
jquery實(shí)現(xiàn)側(cè)邊彈出的垂直導(dǎo)航
這篇文章主要介紹了jquery動(dòng)畫(huà)特效結(jié)合css實(shí)現(xiàn)側(cè)邊彈出的垂直導(dǎo)航的方法及代碼分享,需要的朋友可以參考下
2014-12-12
基于jquery自己寫(xiě)tab滑動(dòng)門(mén)(通用版)
今天與大家分享一下，自己寫(xiě)的滑動(dòng)門(mén)。在網(wǎng)上也搜索了一下，沒(méi)發(fā)現(xiàn)比較好的，于是乎自己寫(xiě)一吧~寫(xiě)起來(lái)也很簡(jiǎn)單，為了方便使用，我已經(jīng)盡量封裝好了。好吧，閑話(huà)少說(shuō)，直接上代碼吧
2012-10-10
談?wù)凧query ajax中success和complete有哪些不同點(diǎn)
jquery ajax中success和complete有哪些不同點(diǎn)呢？大家都了解嗎，接下來(lái)通過(guò)本篇文章給大家介紹jquery ajax中success和complete的不同點(diǎn)，感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
jquery 操作表格實(shí)現(xiàn)代碼(多種操作打包)
最近做東西需要對(duì)表格進(jìn)行操作，用到的動(dòng)作包括:添加一行數(shù)據(jù)、刪除一行數(shù)據(jù)、上下移動(dòng)數(shù)據(jù)，網(wǎng)上找了很多，但是不能完全滿(mǎn)足我的需求，自己琢磨了下，搞了個(gè)這個(gè)東東
2011-03-03
jquery重復(fù)提交請(qǐng)求的原因淺析
jquery重復(fù)提交請(qǐng)求一般來(lái)說(shuō)有兩個(gè)原因，一是沒(méi)有取消綁定；二是多次引用同一個(gè)js文件
2014-05-05
Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫(kù)生成菜單導(dǎo)航條
在網(wǎng)上瀏覽了許多關(guān)于利用Jquery.TreeView插件生成樹(shù)的例子！但是大多數(shù)都沒(méi)有結(jié)合數(shù)據(jù)庫(kù)來(lái)生成樹(shù)，很難運(yùn)用到實(shí)際項(xiàng)目中！
2010-08-08