js实现点击按钮,弹出新窗口

原创 2016年05月31日 17:59:24

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



                                                                                                          Songsong
版权声明:本文为博主原创文章,未经博主允许不得转载。

js通过按钮button点击弹出一个新的窗口页面

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no...
  • tsh18523266651
  • tsh18523266651
  • 2016年09月05日 15:23
  • 4715

JS点击按钮打开新的独立页面

工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1...
  • yangluo1683
  • yangluo1683
  • 2017年06月30日 14:15
  • 2185

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //=...
  • anhuidelinger
  • anhuidelinger
  • 2013年11月29日 14:30
  • 410843

JavaScript中点击按钮弹出新的浏览器窗口

*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.js * 作者:常轩 * 微信公众号:Wor...
  • vcx08
  • vcx08
  • 2016年10月26日 18:56
  • 2453

用JS制作9种弹出小窗口(HTML)

进入许多网站时,有弹出式小窗口,它们五花八门,使我们捉摸不透下面就来介绍用JS制作9种制作弹出小窗口: 1、最基本的弹出窗口代码         其实代码非常简单:         ...
  • dodott
  • dodott
  • 2014年12月23日 23:54
  • 21758

JS点击事件触发弹出窗口样式控制

js控制弹出窗口 编辑 效果图: JS点击事件触发代码(红色部分为): function showDiv(id,name,isShow){ var ho...
  • feifei839535570
  • feifei839535570
  • 2014年01月16日 12:07
  • 1126

【web】a标签点击时跳出确认框

需求如下: 在跳转链接前,需要判断该用户是否有权限打开页面,没有权限的弹出一个确认框提示“没有权限”,有权限的则直接跳转页面。 参考资料一: http://jingyan.baidu.com/...
  • michael_ouyang
  • michael_ouyang
  • 2016年10月09日 13:52
  • 7428

点击文字或按钮弹出一个DIV窗口(DIV悬浮窗口)

以下是弹出窗口代码:                   点击文字弹出一个DIV层窗口代码                    .black_overlay{             ...
  • u013239233
  • u013239233
  • 2016年08月23日 17:15
  • 27051

JS实现制作弹出小窗口并获取单选按钮参数值

test10.html---------------------------------------------------------------------function browser.onc...
  • zhigang52110
  • zhigang52110
  • 2010年01月19日 11:58
  • 627

js弹框 父窗口弹出子窗口 以及 JS实现弹出层效果

网址 : http://blog.csdn.net/dodott/article/details/42113579
  • will5451
  • will5451
  • 2017年03月19日 18:36
  • 1678
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js实现点击按钮,弹出新窗口
举报原因:
原因补充:

(最多只允许输入30个字)