用DIV简仿模态窗口

最新推荐文章于 2022-05-27 11:45:11 发布
最新推荐文章于 2022-05-27 11:45:11 发布
阅读量105 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/seven911/archive/2008/10/28/1321424.html
版权
ContractedBlock.gif ExpandedBlockStart.gif Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
<style>
div.titleBar
{
background: #CC66CC;
margin: 0px auto;
width: 100%;
height: 21px;
border: #0000FF solid 1px;
}
div.closeButton
{
float: right;
}
div.mainBody
{
margin: auto;
}
#divModalDialog
{
border:solid 1px;
background:white;
POSITION: absolute;
left:0px;
top:0px;
DISPLAY: none;
z-index:49;
height:200px;
WIDTH: 350px;
}
#divModal{BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:absolute; TOP: 0px"}
</style>

<script>

function showModel()
{ 
      divModalDialog.style.display = "block";
      resizeModal();
      window.onresize = resizeModal;
}
function closeModel()
{
      divModal.style.width = "0px";
      divModal.style.height = "0px";
      divModalDialog.style.display = "none";
      window.onresize = null;
}
function resizeModal()
{
      divModal.style.width = document.body.scrollWidth;
      divModal.style.height = document.body.scrollHeight;
      divModalDialog.style.left = ((document.body.offsetWidth - divModalDialog.offsetWidth) / 2);
      divModalDialog.style.top = ((document.body.offsetHeight - divModalDialog.offsetHeight) / 2);
}
</script>
 <body>
  <input type="button" value="点击这里" onclick="showModel()" />

<!-- 透明遮罩 -->
<DIV id="divModal"></div>
<!-- 透明遮罩 end -->

<!-- 模态窗口 -->
<DIV id="divModalDialog" >
<div class="titleBar">
     <div class="closeButton"><a href="javascript:closeModel();">[关闭]</a></div>   
</div>
<div class="mainBody">
         在这里添加内容
</div>
</DIV>
<!-- 模态窗口 end -->
 </body>
</html>

转载于:https://www.cnblogs.com/seven911/archive/2008/10/28/1321424.html

weixin_30906425
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个自定义模态窗口的js类(用div实现)
水 手
06-05 6929
在网上看过一些用div实现模态窗口的例子，感觉不是很完整，用起来不太方便，呵呵，所以就在前人的基础上将这种自定义模态窗口组件化了。希望能给大家带来帮助，有什么欠缺的地方欢迎指正 模态窗口类(SubWindow.js) function SubWindow(titleMsg,content,winWidth,winHeight,borderColor,titleColor,backgro
div css窗口 模态窗口
04-24
div css 窗口 模态窗口 JavaScript css
层实现模态窗口(div)
11-07
一个使用div来实现的模态窗口实例！打破windows的传统模态窗口！
如何做DIV模态窗口
热门推荐
编程人生
09-01 1万+
之前用DIV作一个模态窗口，觉得这样的效果还不错，某些时候，加载太多的JQuery，难免使得运行速度变慢。不使用JQuery，我们也可以用DIV来模拟模态窗口。如下图所示： 效果就差不多是这样了，示例文件用的黑色作为背景。虽然这样的模态窗口看起来比较简单，但还是比较实用的。
div模态窗口
javaWeb
06-20 1401
纯CSS Lightbox效果                             .white_content {              display: none;              position: absolute;              top: 25%;              left: 25%;              width: 50%
jquery div模态窗口的简单实例
10-22
下面小编就为大家带来一篇jquery div模态窗口的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用div仿javascript模态窗口
08-07
本资源主要探讨如何使用HTML `<div>` 元素来实现类似JavaScript模态窗口的效果。这既是一种节省资源、提高性能的方法，也适合初学者学习网页动态效果的实现。 首先，我们需要创建一个基本的HTML结构，包括`<head>`...
DIV模态窗口实现
04-02
【DIV模态窗口实现】是一种常见的前端网页设计技术，它允许在不离开当前页面的情况下，弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景，能够提供良好的用户体验，因为它...
js实现简单模态窗口，背景灰显
10-30
我们看到`<div id="divtest">`作为模态窗口的主要内容，而`<table id="tbtest">`则作为另一个可选的模态内容。这两个元素默认设置为`display: none`，意味着它们在页面加载时是隐藏的。 接下来，作者使用一个名为`...
模态窗口div
qq_51116236的博客
05-27 317
模态窗口 模拟的窗口，本质上是，通过设置z-index大小来实现的；初始时，z-index初始参数是<0，所以不显示； 需要显示时，z-index值设置成>0即可。bootstrap来控制z-index的大小。 控制模态村窗口的显示与隐藏 1）方式一：通过标签的属性data-toggle = “modal” data-target = “模态窗口的id” 2）方式二：通过Js函数控制： 选择器(选中div).modal（“show”）；//显示选中的模态窗口 选择器(选中div).mod.
弹出层，不使用ShowModalDialog，弹出层移动自由。
weixin_30735745的博客
08-21 60
<style>#id1{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);}#id2{top:200px;posit...
html div实现模态窗口,jquery div模态窗口的简单实例
weixin_33840959的博客
07-05 462
test.pop-box {/*弹出窗口后，弹出的DIV采用此CSS，保证置于最上层z-index控制Z轴的坐标，数值越大，离用户越近*/z-index: 9999999; /*这个数值要足够大，才能够显示在最上层*/margin-bottom: 3px;display: none;position: absolute;background: gray;border: solid1px #6e8b...
html+css+div 实现简单的模态对话框
liuhui12345的博客
08-17 3580
1. CSS 定义 <style> {# 隐藏#} .hide{ display: none; } {# 遮罩层#} .shade{ position: fixed; top: 0 ; left: 0; ...
ModalDIV，模态DIV
风上人的专栏
07-21 3810
/** * @package ModalDiv.js * @author: 熊水林(xionglb@163.com) * @version：版权所有（2008-7-13） * * 这个包实现的效果是在页面弹出一个DIV，用户只能关闭它之后才能操作其它的HTML组件 */var bodyScrollWidth = 0;var bodyScrollHeight = 0;var isIE = nav
模拟ShowModelDialog
鲁班学艺
09-11 1016
1、主窗口代码：(弹出层"divEdit", 遮照层"mask", 弹出层内放入一ifrme)     配送方式                 .header        {            background: #036;            height: 10%;            font-family: Verdana, Arial, Helvetica, sans
DIV模仿窗口效果
08-14 553
一,  点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color:#000000; z-index:1001; -moz-opacity: 0.2; opacity:0.2; fil
一个背景变暗的div可拖动提示窗口，兼容IE、Firefox、Opera
Neoman的专栏
12-26 1161
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml">"Content-Type" content="text/html; charset=utf-8" />无标题文档
用css+div+javascript模拟模态窗口(可拖动)
weixin_30887919的博客
11-25 121
<html> <head> <style> div.titleBar{background: #2279F3;margin: 0px auto;width: 100%;height: 21px;border: #0000FF solid 1px;} div.closeButton{float: right;} div.mainBody{margin: auto;...
bootstrap模态窗口
最新发布
11-24
Bootstrap模态窗口是一种常见的Web界面设计元素，用于在当前页面上弹出一个对话框，以便用户进行某些操作或查看信息。以下是一个简单的Bootstrap模态窗口的例子： ```html <!-- 模态窗口触发按钮 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态窗口 </button> <!-- 模态窗口结构 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">模态窗口标题</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> 模态窗口内容 </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> ``` 在上面的例子中，我们使用了Bootstrap提供的`data-toggle`和`data-target`属性来触发模态窗口的显示。模态窗口的结构包括一个`<div>`元素，其中包含了模态窗口的标题、内容和底部按钮等元素。我们可以通过修改`<div class="modal-dialog">`元素的类来改变模态窗口的大小，

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值