jQuery實現單擊按鈕遮罩彈出對話框效果（2）

2019-11-19 17:29:32

字體：大中小

來源：轉載

供稿：網友

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

首先，這里的引用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>

效果圖：