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

更新時間：2022年03月30日 15:17:52 作者：守護_瀟瀟

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

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

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

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無標題文檔</title> 
<!--使用對畫框需要的兩個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="請輸入" stylr="color:gray;" onfocus="javascript:if(this.value == '請輸入') this.value='';this.style.color='#00CCCC';" 
onblur="javascript:if(this.value == '') this.value='請輸入';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>

效果圖：