zoukankan      html  css  js  c++  java
  • jquery ui dialog|popup 弹出窗口层

    jquery ui dialog|popup 弹出窗口层

    /***************************/
    //@Author: Adrian "yEnS" Mato Gondelle
    //@website: http://www.cnblogs.com/wangdetian168
    //@email: wangdetian168@163.com    
    /***************************/
    document.write('<div id="backgroundPopup"></div> <div id="popupContact" style="display:none;position:fixed;_position:absolute;height:384px;408px;background:#FFFFFF;border:2px solid #cecece;z-index:2;padding:12px;font-size:13px;"> <a id="popupContactClose">x</a><h1 id="idModalTitle" align="right"></h1><p id="idContentArea"></p></div>');
    document.write("<link rel='stylesheet' type='text/css' href='general.css'>");
    //SETTING UP OUR POPUP
    //0 means disabled; 1 means enabled;
    var popupStatus = 0;
    var idCloses=new Array("popupContactClose","buttonClose");

    var popupModal='{idLoadHtml:"popupContact1",idModalTitle:"弹出窗口测试",isUseTitle:true,align:"center",modalWidth:"408px";modalHeight:"384px",show:function(){ centerPopup();//load popup loadPopup();}}';
    //popupModal={idLoadHtml:"popupContact1",idModalTitle:"弹出窗口测试",isUseTitle:true};

    //loading popup with jQuery magic!
    function loadPopup(){
     //loads popup only if it is disabled
     if(popupStatus==0){
      $("#backgroundPopup").css({
       "opacity": "0.7"
      });
      $("#backgroundPopup").fadeIn("slow");
      $("#popupContact").fadeIn("slow");
      popupStatus = 1;
     }
    }

    //disabling popup with jQuery magic!
    function disablePopup(){
     //disables popup only if it is enabled
     if(popupStatus==1){
      $("#backgroundPopup").fadeOut("slow");
      $("#popupContact").fadeOut("slow");
      popupStatus = 0;
     }
    }


    //centering popup
    function centerPopup(){
     //request data for centering
     var windowWidth = document.documentElement.clientWidth;
     var windowHeight = document.documentElement.clientHeight;
     var popupHeight = $("#popupContact").height();
     var popupWidth = $("#popupContact").width();
     //centering
     $("#popupContact").css({
      "position": "absolute",
      "top": windowHeight/2-popupHeight/2,
      "left": windowWidth/2-popupWidth/2
     });
     //only need force for IE6
     
     $("#backgroundPopup").css({
      "height": windowHeight
     });
     
    }

    //CONTROLLING EVENTS IN jQuery
    $(document).ready(function(){
     //弹出层
     popupModal.show=function(e)
     {
     centerPopup();
      //load popup
      loadPopup();
     }
     //是否显示标题
      if(popupModal.isUseTitle){
     $("#idModalTitle").html(popupModal.idModalTitle);
     //alert($("#idModalTitle").attr("align"));
     $("#idModalTitle").attr("align",popupModal.align);
     //alert(popupModal.align);alert($("#idModalTitle").attr("align"));
     }
     else{
      $("#idModalTitle").hide();
     }
     //设置窗口大小
     document.getElementById("popupContact").style.width=popupModal.modalWidth;
     document.getElementById("popupContact").style.height=popupModal.modalHeight;
     $("#idContentArea").html(document.getElementById(popupModal.idLoadHtml).innerHTML);
     //LOADING POPUP
     //Click the button event!
     $("#button").click(function(){
      //centering with css
      centerPopup();
      //load popup
      loadPopup();
     });
        
     //CLOSING POPUP
     //Click the x event!

     for(var i=0;i<idCloses.length;i++)
     {
         $("#"+idCloses[i]).click(function(){
        disablePopup();
       });
     }

     //Click out event!
     $("#backgroundPopup").click(function(){
      disablePopup();
     });
     //Press Escape event!
     $(document).keypress(function(e){
      if(e.keyCode==27 && popupStatus==1){
       disablePopup();
      }
     });

    });

    genneral.css

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
    font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
     tfoot, thead, tr, th, td {
    border:0pt none;
    font-family:inherit;
    font-size:100%;
    font-style:inherit;
    font-weight:inherit;
    margin:0pt;
    padding:0pt;
    vertical-align:baseline;
    }
    body{
    background:#fff none repeat scroll 0%;
    line-height:1;
    font-size: 12px;
    font-family:Tahoma,arial,sans-serif;
    margin:0pt;
    height:100%;
    }
    table {
    border-collapse:separate;
    border-spacing:0pt;
    }
    caption, th, td {
    font-weight:normal;
    text-align:left;
    }
    blockquote:before, blockquote:after, q:before, q:after {
    content:"";
    }
    blockquote, q {
    quotes:"" "";
    }
    a{
    cursor: pointer;
    text-decoration:none;
    }
    br.both{
    clear:both;
    }
    #backgroundPopup{
    display:none;
    position:fixed;
    _position:absolute; /* hack for internet explorer 6*/
    height:100%;
    100%;
    top:0;
    left:0;
    background:#000000;
    border:1px solid #cecece;
    z-index:1;
    }
    #popupContact{

    }
    #popupContact h1{

    color:#6FA5FD;
    font-size:22px;
    font-weight:700;
    border-bottom:1px dotted #D3D3D3;
    padding-bottom:2px;
    margin-bottom:20px;
    }
    #popupContactClose{
    font-size:14px;
    line-height:14px;
    right:6px;
    top:6px;
    position:absolute;
    color:#6fa5fd;
    font-weight:700;
    display:block;
    }
    #button{
    text-align:center;
    margin:100px;
    }

    测试页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Jquery教程演示:JavaScript弹出窗口DIV层效果代码--代码吾爱 </title>
     
         <script type="text/javascript" src="../ui-images/js/jquery-1.4.2.min.js"></script>

     <script src="popup.js" type="text/javascript"></script>
        <script type="text/javascript">
     
     idCloses.push("idput");
     popupModal={idLoadHtml:"popupContact1",idModalTitle:"弹出窗口测试",isUseTitle:true,align:"center",modalWidth:"800px",modalHeight:"300px"};

     
        </script>
    </head>
    <body>
     <center>
      <p><img/ src="logo.gif" alt="点击进入代码吾爱"/></p>
      <p><img/ src="banner.bmp" alt="点击进入代码吾爱"/></p>
      <div id=""><input type="button" onclick="popupModal.show()"  value="点击这里查看效果" /></div>
      <p></p>
      <p>教程:JS弹出窗口DIV层效果代码 </a></p>
     </center>
     <div id="popupContact1" style="display:none">
     
      <p id="contactAreasss">
       这就是我们创建的漂亮DIV弹窗效果。可以看到jQuery实在是非常强大,我们仅需少量的CSS和JavaScript代码即可完成这一效果。<br/><br/>
       我们可以在这个弹窗之中放置一个登录框、注册表单、重要事件提醒等等。
       <br/><br/>
       要关闭这个窗口,请点击右上方的X按钮或点击弹窗外的背景或按下键盘上的ESC键。
                <input type="button" id="buttonClose" value="关闭" />
           
       
      </p>
     </div>

    </body>
    </html>

  • 相关阅读:
    第二节:ts变量声明、通用js数据类型、ts新数据类型、ts类型补充
    第一节:TypeScript简介(特点、编译环境、运行模式)、基于webpack 或 ts-node运行ts详解
    第十七节:Vuex4.x 之Module详解(局部状态、命名空间、辅助函数等) 和 补充nexttick用法
    第十六节:Vuex4.x 简介及state、getters、mutations、actions详解(OptionApi 和 CompositionApi)
    第十五节:VueRouter4.x用法之router-link/router-view的v-slot、动态增删路由、路由导航守卫
    第十四节:VueRouter4.x简介、基本用法、路由懒加载(打包分析)、动态路由、路由嵌套、相关Api
    第十三节:Vue3高级之 render/h函数、jsx、自定义指令、teleport、插件
    HTML让内部元素居中
    蓝桥杯 Web 应用开发模拟赛首次公开!参赛选手速进!
    蓝桥杯历年真题你刷了吗?过来人教你逆袭!
  • 原文地址:https://www.cnblogs.com/bestsaler/p/1835515.html
Copyright © 2011-2022 走看看