实现点击按钮，弹出新窗口代码,Js代码库,德仔网

代码语言

代码分类

【Js】实现点击按钮，弹出新窗口

作者:netCode / 发布于2017/10/25/ 431

*js引入jquery.js
样式：

<style type="text/css"> 
  .window{ 
     width:800px; 
     background-color:#f6a828; 
     position:absolute; 
     padding:2px; 
     margin:5px; 
     display:none; 
     } 
   .content{ 
     height:350px; 
     background-color:#FFF; 
     font-size:14px; 
     overflow:auto; 
     } 
     .title{ 
         padding:2px; 
         color:black; 
         font-size:14px; 
         } 
  .title img{ 
         float:right; 
         } 
 </style> 

        <script  type='text/javascript'>
         //获取窗口的高度 
 var windowHeight; 
 //获取窗口的宽度 
 var windowWidth; 
 //获取弹窗的宽度 
 var popWidth; 
 //获取弹窗高度 
 var popHeight; 
 function init(){ 
windowHeight=$(window).height(); 
windowWidth=$(window).width(); 
popHeight=$(".window").height(); 
popWidth=$(".window").width(); 
} 
 //关闭窗口的方法 
function closeWindow(){ 
    $(".title img").click(function(){ 
         $(this).parent().parent().hide("slow"); 
        }); 
     }
   //定义弹出居中窗口的方法 
    function popCenterWindow(){ 
        init(); 
        //计算弹出窗口的左上角Y的偏移量 
    var popY=(windowHeight-popHeight)/2; 
     var popX=(windowWidth-popWidth)/2; 
     //alert('jihua.cnblogs.com'); 
    //设定窗口的位置 
   $("#center").css("top",popY).css("left",popX).slideToggle("slow");  
    closeWindow(); 
    } 
    function popLeftWindow(){ 
        init(); 
        //计算弹出窗口的左上角Y的偏移量 
    var popY=windowHeight-popHeight; 
    //var popX=-(windowWidth-popWidth); 
    //alert(popY); 
    //设定窗口的位置 
    $("#left").css("top",popY-50).css("left",50).slideToggle("slow"); 
    closeWindow(); 
    } 
    function popRightWindow(){ 
        init(); 
        //计算弹出窗口的左上角Y的偏移量 
    var popY=windowHeight-popHeight; 
    var popX=windowWidth-popWidth; 
    //alert(www.cnblogs.com/jihua); 
    //设定窗口的位置 
    $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow"); 
    closeWindow(); 
   }

         </script>



实现方式：


 $(function(){
       //按钮点击事件
     
$("#btn_center").click(function () {
   popCenterWindow();
          });
    });
    

   function windowClose(){
  $('#center').hide("slow");  //关闭窗口
}


 //按钮
 <button id="btn_center"><h1>按钮名称</h1></button>


 <div class="window" id="center"> 
           <div id="title" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />标题名称</div> 
      <div class="content"> 
//弹出窗口中显示的内容
                                        <button onclick='windowClose()'><h1>取消窗口</h1></button>
     </div> 
     </div> 


 $(function(){
       //按钮点击事件
     
$("#btn_center").click(function () {
   popCenterWindow();
          });
    });

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

netCode贡献的其它代码(31)