`
huibin
  • 浏览: 757154 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

js弹出窗体

    博客分类：
  • JS
OperaJavaScriptCSSUPXHTML 
阅读更多

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>弹出窗口测试</title>

 <script language="javascript" src="JS/Alert.js" type="text/javascript"></script>

 <link rel="Stylesheet" href="css/alert.css" />
</head>
<body>
 <form action="#">
  <a href="#" onclick="AlertWindow(document.getElementById('alertwindow'),400,'常用短信','cancel');">
   弹出</a>
  <div class="hide" id="alertwindow">
   <p>
    sdfdfdfdfdf</p>
   <p>
    <select>
     <option>你好</option>
     <option>没问题</option>
    </select>
   </p>
  </div>
 </form>
</body>
</html>

 

 

 

 

var ALERT_TITLE = "客户关系管理";
var ALERT_BUTTON_TEXT = "确　定";
var ALERT_BUTTON_CANCEL = "取　消";

function AlertWindow(popdiv, width, title, types)
{
 AlertWindow(popdiv, width, title, types, null);
}
function AlertWindow(popdiv, width, title, types, hidbtnId)
{
 var d = document;
 
 if(d.getElementById("mainControl")) return;
 
 //遮盖页面的幕
 var screend = d.createElement("div");
 screend.id = "gp_screen";
 screend.style.zIndex = 999;
 screend.style.width = window.screen.width - 22 + "px";
 screend.style.height = window.screen.height - 226 + "px";
 screend.onclick = function(){WindowClose(popdiv, bodyControl)};
 d.getElementsByTagName("body")[0].appendChild(screend);
 //声明总窗体
 var mainControl = d.getElementsByTagName("form")[0].appendChild(d.createElement("div"));
 mainControl.id = "mainControl";
 mainControl.style.zIndex = 1000;
 mainControl.className = "dragclass";
 mainControl.style.width = width + "px";
 //声明窗体的头部
 var mainHead = mainControl.appendChild(d.createElement("div"));
 mainHead.id = "HeadControl";
 mainHead.appendChild(d.createTextNode(ALERT_TITLE + "——" + title));
 
 //声明窗体的内容部分，并加载内容
 var bodyControl = mainControl.appendChild(d.createElement("div"));
 bodyControl.id = "BodyControl";
 bodyControl.style.width = width - 20 + "px";
 while(popdiv.childNodes.length > 0)
 {
  bodyControl.appendChild(popdiv.childNodes[0]);
 }
 
 //声明头部的关闭按钮
 var closewindow = d.createElement("a");
 closewindow.href = "#";
 closewindow.style.left = width - 20 + "px";
 //closewindow.style.top = 2 + "px";
 closewindow.id = "x";
 closewindow.style.zIndex = 1002;
 //closewindow.innerHTML = "x";
 closewindow.onclick = function() {WindowClose(popdiv, bodyControl)};
 mainControl.appendChild(closewindow);
 
 //声明窗体的脚部，并加载“取定，取消按钮”
 /*var footControl = mainControl.appendChild(d.createElement("div"));
 footControl.id = "FootControl";
 footControl.style.width = width;
 
 if(types.indexOf("OK") >= 0)
 {
  var btnOK = d.createElement("input");
  btnOK.type = "button";
  btnOK.id = "closeBtn";
  btnOK.value = ALERT_BUTTON_TEXT;
  btnOK.onclick = function(){WindowSubmit(popdiv, hidbtnId);}
  footControl.appendChild(btnOK);
 }
    if(types.indexOf("Cancel") >= 0)
    {
  var btnCancel = d.createElement("input");
  btnCancel.type = "button";
  btnCancel.value = ALERT_BUTTON_CANCEL;
  btnCancel.onclick = function() {WindowClose(popdiv, bodyControl)};
  footControl.appendChild(btnCancel);
    }*/
    //取消页面的select的显示
    var sels = document.getElementsByTagName("select");
    for(i = 0; i < sels.length; i ++)
    {
  if(sels[i].style.visibility == "")
  {
   sels[i].style.visibility = "hidden";
  }
    }
    var thesels = mainControl.getElementsByTagName("select");
    for(i = 0; i < thesels.length; i ++)
    {
  if(thesels[i].style.visibility == "hidden")
  {
   thesels[i].style.visibility = "";
  }
    }
   
    drogdron();
}

function WindowClose(popdiv, bodyControl)
{
 while(bodyControl.childNodes.length > 0)
 {
  popdiv.appendChild(bodyControl.childNodes[0]);
 }
 document.getElementsByTagName("form")[0].removeChild(document.getElementById("mainControl"));
 document.getElementsByTagName("body")[0].removeChild(document.getElementById("gp_screen"));
 //显示页面上的select
 var sels = document.getElementsByTagName("select");
    for(i = 0; i < sels.length; i ++)
    {
  if(sels[i].style.visibility == "hidden")
  {
   sels[i].style.visibility = "";
  }
    }
    if(document.getElementById("ChkId") != null)
    {
        document.getElementById(document.getElementById("ChkId").value).parentNode.parentNode.style.backgroundColor = "#E9FDE8";
        document.getElementById(document.getElementById("ChkId").value).checked = false;
    }
   return false;
}
function WindowSubmit(popdiv, hidbtnId)
{
 popdiv.innerHTML = document.getElementById("BodyControl").innerHTML;
 WindowClose();
 if(hidbtnId != null)
 {
  document.getElementById(hidbtnId).onclick();
 }
 return false;
}
 function gs(d)
 {
 var t=document.getElementById(d);
 if (t)
 {
 return t.style;
 }
 else
 {
 return null;
 }
 }
 function gs2(d,a)
 {
 if (d.currentStyle){
   var curVal=d.currentStyle[a]
 }else{
   var curVal=document.defaultView.getComputedStyle(d, null)[a]
 }
 return curVal;
 }
 
function drogdron()
{
if  (document.getElementById)
{
  (
      function()
      {
  if (window.opera)
  {
   document.write("<input type='hidden' id='Q' value=' '>");
     }
  var n = 1000;
  var dragok = false;
  var y,x,d,dy,dx;
  function move(e)
  {
   if (!e) e = window.event;
   if (dragok)
   {
    d.style.left = dx + e.clientX - x + "px";
    d.style.top  = dy + e.clientY - y + "px"; 
    return false;
   }
  }

  function down(e)
  {
   if (!e) e = window.event;
   var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
   if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass")
   {
    temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
   }
   if('TR'==temp.tagName)
   {
    temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
   }
   if (temp.className == "dragclass")
   {
    if (window.opera)
    {
     document.getElementById("Q").focus();
    }
    dragok = true;
    temp.style.zIndex = n++;
    d = temp;
    dx = parseInt(gs2(temp,"left"))|0;
    dy = parseInt(gs2(temp,"top"))|0;
    x = e.clientX;
    y = e.clientY;
    document.onmousemove = move;
    return false;
   }
  }

  function up()
  {
   dragok = false;
   document.onmousemove = null;
  }
  document.onmousedown = down;
    document.onmouseup = up;
  }
    )();
}
}

分享到：
| div锁屏
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS弹出窗口JS弹出窗口JS弹出窗口JS弹出窗口

    在网页开发中，JS常用于创建各种弹出窗口，以实现如提示信息、用户输入对话框或者自定义内容窗口等功能。本篇文章将详细探讨JS弹出窗口的实现方式和相关知识点。 首先，JS中最常见的弹出窗口是`alert()`函数。它会...

    自定义js弹出窗口（弹出层）

    在网页开发中，自定义js弹出窗口，也被称为弹出层或对话框，是一种常见的交互设计技术。这种技术允许开发者在用户与页面交互时显示额外的信息或功能，而不会中断主页面的工作流程。在本教程中，我们将深入探讨如何...

    javascript 弹出窗口

    在给定的标题“javascript 弹出窗口”和描述“推荐一个非常好用的javascript弹出窗口控件”中，我们可以推测这是一个关于使用JavaScript实现弹出窗口的控件库。下面我们将深入探讨JavaScript弹出窗口的相关知识点。 ...

    JAVASCRIPT弹出窗口大总结

    ### JavaScript弹出窗口知识点总结 #### 一、概述 JavaScript是一种广泛使用的脚本语言，它在前端开发中占据着极其重要的地位。通过JavaScript，开发者可以实现网页与用户的交互功能，其中弹出窗口就是一种常见的...

    js弹出窗口、弹出层

    总结，"js弹出窗口、弹出层"是网页交互中的重要元素，涉及到了JavaScript的DOM操作、事件处理、样式控制等多个方面。理解并掌握如何创建和使用弹出层，对于提升网页的用户体验具有重要意义。"FineMessBox"可能提供了...

    玩透javascript弹出窗口

    JavaScript弹出窗口是一种常见的网页交互方式，用于向用户展示额外信息或进行特定操作。本文将深入探讨如何设计和控制JavaScript弹出窗口。 首先，最基本的弹出窗口代码是使用`window.open`函数。例如： ```...

    功能强大的JS弹出窗口

    标题中的“功能强大的JS弹出窗口”指的是利用JavaScript实现的各种弹出对话框功能，这些对话框能够增强用户体验，提供丰富的交互方式。 在描述中提到的弹出窗口js代码，它提供了多种弹出效果，让我们一一解析： 1....

    javascript弹出窗体

    ### JavaScript弹出窗体知识点详解 #### 一、基本概念 在Web开发中，JavaScript是一种常用的客户端脚本语言，能够实现动态网页效果。其中，“弹出窗体”是指利用JavaScript在用户当前浏览的网页之外打开一个新的...

    js弹出窗口 + 获取上传文件全路径

    本文将深入探讨"js弹出窗口 + 获取上传文件全路径"这一主题，这两个知识点是JavaScript在交互式用户界面设计中的关键部分。 首先，让我们来讨论"js弹出窗口"。在网页开发中，弹出窗口通常用于显示警告信息、确认...

    js弹出窗口\GenJS

    `GenJS`可能是指一个特定的库或者工具，用于生成JavaScript弹出窗口效果。下面将详细讨论JavaScript弹出窗口的实现以及可能与`GenJS`相关的知识点。 1. **JavaScript 弹出窗口** JavaScript 提供了三种基本的弹出...

    JAVASCRIPT弹出窗口代码

    ### JavaScript弹出窗口代码详解 在网页开发过程中，有时我们需要创建一个新的浏览器窗口来显示特定的信息或功能，这就需要用到JavaScript中的`window.open()`方法。本文将详细介绍如何使用此方法以及其参数的意义...

    超好用的js弹出窗口

    首先，让我们了解一下什么是JavaScript弹出窗口。在网页开发中，我们经常使用`window.alert()`、`window.confirm()`和`window.prompt()`这三个函数来创建基本的弹出对话框。然而，这些内置的弹出窗口功能有限，样式...

    js弹出窗体讲解及示例源码

    弹出窗体是JavaScript中常见的一种交互方式，它能够提供额外的信息、确认用户操作或接收用户输入。在网页设计中，弹出窗体的应用无处不在，如警告对话框、提示信息、登录框、模态窗口等。 标题“js弹出窗体讲解及...

    js 弹出窗口

    在这个场景下，"lhgdialog.js"可能是一个这样的库，它扩展了JavaScript弹出窗口的功能。 "lhgdialog.js"可能包含以下特性： 1. **模态效果**：阻止用户与背景页面交互，直到弹出窗口被关闭。 2. **自定义样式**：...

    非常炫的js弹出窗口

    通过上述技术，我们可以创建出一个不仅功能强大，而且视觉效果出色的JavaScript弹出窗口。在实际开发中，可以参考现有的库和框架，如jQuery UI、SweetAlert2或者自定义实现，以满足特定项目的需求。对于初学者，理解...

    javascript弹出窗口lhgdialog

    javascript弹出窗口lhgdialog 非常好用

    JS弹出窗口使用说明

    JavaScript（简称JS）是一种轻量级的编程语言，广泛用于网页和网络应用开发，而弹出窗口是JS中常见的交互方式。这篇文档主要介绍了名为lhgdialog的JS弹出窗口控件的使用方法。 lhgdialog控件由一系列文件组成，它们...

    漂亮的js弹出窗口（多用于图片)

    JavaScript弹出窗口通常是通过`window.open()`函数来实现的，它可以创建一个新的浏览器窗口或者在已存在的窗口中打开新的页面。但是，这种原生的弹出方式往往过于简单，无法满足复杂的交互需求，比如图片预览、滑动...

    jQuery popup javascript 弹出窗口

    总的来说，jQuery popup javascript弹出窗口的实现涉及到JavaScript编程、CSS样式设计、事件处理、浏览器兼容性优化等多个方面，是一个综合性的网页开发任务。通过研究提供的文件，可以深入理解这些技术的结合应用。

Magicbox
Global site tag (gtag.js) - Google Analytics