自定义的div弹出窗口

原创 2015年07月09日 18:56:11

自定义一个上下左右居中的div窗口


/* 自定义DIV弹窗样式,是窗口居中 */

.winwarin{
    position:absolute;
    top:50%;
    left:50%;
    width:200px;
    height:100px;
    margin-top:-50px;
    margin-left:-100px;


/*     border:1px solid red; */
    line-height:30px;
    font-size:16px;
    text-align:center;

    }

<!--javascript部分-->

<script type="text/javascript">

        function winwarin(v)
        {
         message_box.style.visibility='visible';
        //创建灰色背景层
         procbg = document.createElement("div"); 
         procbg.setAttribute("id","mybg");
         procbg.style.margin="0"; 
         procbg.style.overflowX="auto";
         procbg.style.background = "#000"; 
         procbg.style.width = "100%"; 
         procbg.style.height = "100%";
         procbg.style.position = "absolute"; 
         procbg.style.top = "0"; 
         procbg.style.left = "0"; 
         procbg.style.zIndex = "500"; 
         procbg.style.opacity = "0.2"; 
         procbg.style.filter = "Alpha(opacity=20)"; 

         //背景层加入页面
         document.body.appendChild(procbg);
         document.body.style.overflow = "hidden";
 document.getElementById("msg").innerText=v;//.innerHTML 
        }


        //关闭功能
        function closeProc()
        {
          message_box.style.visibility='hidden';

          procbg.style.visibility = "hidden";

        }
    </script>


  <!--信息提示层-->


<div class="winwarin" id="message_box" style="position:absolute;


/* left:350px;top:160px; */
width:300px;height:150px;


filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);


z-index:1000; visibility:hidden">


<div id= "message" style="border:1px #95BDD4 solid;width:95%; height:95%; background:#fff; color:#036; font-size:14px; line-height:150%; border-top-left-radius: 7px;border-top-right-radius: 7px; border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;">


<!-- DIV弹出状态行:标题、关闭按钮 -->


<div style="background:#95BDD4; height:15%;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px; padding:3 5 0 5; color:#03F" >


<span style="display:inline;width:100px; text-align:left;font-size:140%; float:left; font-weight:bold">提示信息</span>


<div style="display:inline; cursor:pointer" onclick="closeProc()">


<span style="float:right;font-size:140%">×</span></div>


</div>

<div style="text-align:center; padding:40px 0 0 0">


<span id="msg" style="font-size:13px;"></span>


</div>


</div>


</div>


弹出窗口触发器:

  <input type="file"  class="medium"/>&nbsp;<img src="img/new/warin.png" alt="提醒" width="20" height="20" style="text-align: center;" onclick="winwarin('上传文件必须为光合有效辐射')"/>


js制作一个简单的div弹窗:

js制作一个简单的div弹窗: 演示地址:http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ ...
  • u010523770
  • u010523770
  • 2016年07月04日 19:09
  • 9435

一个十分简单的div弹出层小例子

一个十分简单的div弹出层小例子
  • jdfkldjlkjdl
  • jdfkldjlkjdl
  • 2014年09月15日 21:41
  • 9675

一个很好的页面弹出div的写法

主要就是一个css和一个js,然后再自己代码中结果即可
  • Rava722
  • Rava722
  • 2016年12月14日 14:33
  • 343

javascript如何弹出一个div登录框

javascript如何弹出一个div登录框
  • Huang6899587
  • Huang6899587
  • 2018年01月02日 21:47
  • 237

div弹出框/弹出层简单实现办法

弹出框实现办法非常多,但是有不少实现办法比较复杂,不容易实现,
  • zurich1979
  • zurich1979
  • 2014年06月30日 12:13
  • 13105

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

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

自定义的div弹出窗口

自定义一个上下左右居中的div窗口 /* 自定义DIV弹窗样式,是窗口居中 */ .winwarin{     position:absolute;     top:50%;    ...
  • wang_tao219
  • wang_tao219
  • 2015年07月09日 18:56
  • 738

弹出窗口(DIV浮动)

widget.css: .widget_newfolder .p1 { font-size: 20px; } .widget_newfolder .p2 { margin-top: 15px; }...
  • hutao1101175783
  • hutao1101175783
  • 2013年10月05日 23:04
  • 1985

js原型方式自定义弹窗

function confirmAlert(){}; confirmAlert.prototype.make = function(title,content,falseTit,falseFn,...
  • AloneAsFoam
  • AloneAsFoam
  • 2017年09月28日 15:32
  • 133

jQuery实现自定义样式的弹出窗口和确认框

(function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("ale...
  • qiuzhi__ke
  • qiuzhi__ke
  • 2015年09月02日 00:15
  • 19275
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义的div弹出窗口
举报原因:
原因补充:

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