css javascript div实现网页的模态对话框

最新推荐文章于 2021-06-29 15:17:55 发布
最新推荐文章于 2021-06-29 15:17:55 发布
阅读量1k 收藏
点赞数
分类专栏： html 文章标签： javascript css div border class html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peter_666/article/details/7080248
版权
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
.black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=30);
}
.white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
}
.test{width:56%; height:10%;position:absolute; left:252px; top:200px; background:#FFFFFF; border:#00FF33 solid 1px; text-align:center; background:#009933;z-index:1003;}
-->
</style>
<script language="javascript">
function opendiv(lixing){
document.getElementById("test").style.display="block";
//if(lixing==0)
document.getElementById('fade').style.display='block';
}
function colsediv(lixing){
document.getElementById("test").style.display="none";
//if(lixing==0)
document.getElementById('fade').style.display='none';
}
</script>
</head>

<body>
<p>可以根据自己要求修改css样式<a href = "javascript:void(0)" onclick = "opendiv(0)">点击这里打开窗口(不充许)</a></p>
<!--<p>可以根据自己要求修改css样式<a href = "javascript:void(0)" onclick = "opendiv(1)">点击这里打开窗口(充许)</a></p>-->

<div id="test" class="test" style="display:none">This is the lightbox content. <a href = "javascript:void(0)" onclick = "colsediv(0)">Close</a>呵呵呵</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

 

 

peter_666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Div实现模态对话框效果的JavaScript代码
laugh666的博客
10-02 145
在Web开发中，模态对话框是一种常见的交互元素，它可以在页面上显示一个浮动窗口，并阻止用户与页面上其他元素进行交互，直到对话框被关闭。最后，我们需要注意的是，这只是一个简单的示例，你可以根据自己的需求对模态对话框进行进一步的定制和样式修改。在上述代码中，我们使用了一个隐藏的Div元素作为模态对话框的容器，并在其中放置了一些示例内容，如标题、文本和关闭按钮。首先，我们需要创建一个HTML模板，其中包含一个隐藏的Div元素，用于显示模态对话框的内容。/* 设置一个较高的层级，确保在顶部显示 */
js实现div模拟模态对话框展现URL内容
01-19
本文实例讲述了js实现div模拟模态对话框展现URL内容。分享给大家供大家参考，具体如下： [removed] function sAlert(str){ var msgw,msgh,bordercolor; msgw=800;//提示窗口的宽度 msgh=600;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor=#336699;//提示窗口的边框颜色 titlecolor=#99CCFF;//提示窗口的标题颜色 var sWidth,sHeight; sWidth=document.body.offsetWidth; s
html 模态div,css javascript div实现网页的模态对话框
weixin_39729784的博客
06-29 102
/p>"http://www.php.cn">无标题文档function opendiv(lixing){document.getElementById("test").style.display="block";//if(lixing==0)document.getElementById('fade').style.display='block';}function colsediv...
JavaScript+div实现模态对话框
cxzhq2002的杂记
01-23 3953
一个类似163邮箱对话框的功能。主要是2个层来完成这个效果，第一就是用来锁住下面整个页面的层，要有透明的效果，可以用filter:alpha(opacity=50)。还有一个层是用来显示对话框内容的，所以zIndex参数一定要设置的比锁频层高。对话框的CSS可以自己定义一下，要注意的是，CSS中body一定要定义margin:0，否则锁频时，会出现空隙，而产生锁频不完整的问题，还有一个就是Se
javaScript用DIV模拟创建模态对话框
jintingbo的专栏
09-03 1744
现在google浏览器不支持非模态对话框了，所以只好用DIV模拟创建一个模态对话框，代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;div做弹窗口的效果&lt;/title&gt;         &am
<a>标签中 href 和 onclick 的区别，以及href="javascript:xxx(this);"与onclick="xxx(this);" 传递this参数的区别
热门推荐
有范管理美学 | 公众号/头条号：有范管理美学
08-18 3万+
标签中href属性动作和onclick事件的区别，以及href="javascript:xxx(this);"与onclick="xxx(this);" 传递this参数的区别 一、href 与 onclick 的区别 我以前在写标签的 href 和 onclick 一直很随意，后来出过几次问题，以后才开始重视这个问题： 首先摘录一篇文
JavaScript之实例练习（模态对话框详解）
Viewinfinitely的博客
05-13 641
文章目录一、Class的属性二、模态对话框 一、Class的属性 1、class的常用操作 获取对象所有class： elementNode.className 给对象添加class：elementNode.classList.add 给对象去除class：elementNode.classList.remove 2、练习代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
html模态对话框代码,JavaScript 实现模态对话框 源代码大全
weixin_39577422的博客
06-07 567
首先，来说一下对话框：对话框在Windows应用程序中使用非常普遍，许多应用程序的设定，与用户交互需要通过对话框来进行，因此对话框是Windows应用程序中最重要的界面元素之一，是与用户交互的重要手段。对话框是一个特殊的窗口，任何对窗口进行的操作(如移动、最大化、最小化等)也可以在对话框实施。对话框大致可以分为以下两种：(1)模态对话框：模态对话框弹出后，独占了系统资源，用户只有在关闭该对话框后才...
用javascript css div实现模态对话框
12-17
用javascript css div实现弹出模态对话框，盖住下面的部分，上面的透明度改变
JavaScript实现模态对话框实例
11-27
总结来说，这个JavaScript模态对话框实例展示了如何通过操作DOM元素的CSS类来控制其可见性，实现基本的弹出对话框功能。在实际项目中，开发者可以根据需求进一步优化，增加交互性和功能，提升用户体验。
Bootstrap模态对话框的简单使用
09-02
Bootstrap模态对话框是网页设计中常用的一种交互...总之，Bootstrap模态对话框为开发者提供了一种优雅、易用的方式，用于在网页上实现弹出式交互，提升用户体验。了解并熟练掌握其用法，对于Web开发工作是非常有益的。
vue中的模态对话框组件实现过程
08-27
Vue中的模态对话框组件实现过程 ...实现模态对话框组件需要我们具备一定的Vue框架知识和CSS样式知识。同时，我们也需要考虑到组件的可复用性、灵活性和可维护性，以便在实际开发中实现高效和灵活的开发。
网站美工面试题：DIV+CSS最有可能遇到的八个问题
peter_666的专栏
11-04 7043
现在相关单位招聘美工，都有DIV CSS布局方面的知识要求，现列举DIV CSS最有可能遇到的八个面试问题，希望对您有所帮助。 一、超链接访问过后hover样式就不出现的问题？ 被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A 二、IE6的双倍边距BUG 例如: body {margin:0;} div {float:
自定义html标签和表单属性
peter_666的专栏
05-31 2418
最近看到网上好多html源代码不是很明白 ，经过一番研究才知道是html自定义标签 如： longdu\:my{border:1px solid #ccc;background-color:#efefef;font-weight:bold;} longdu\:your{border:1px solid red;background-color: #FFF5F4;font-weight
javascript动态操作表格：新增、设置样式、删除、移动行
peter_666的专栏
11-09 1604
一、动态设置元素readonly属性时，js里面的readOnly一定要大写O document.getElementById("id").readOnly=true; 二、动态给表插入行： function addRow(){   //动态插入一行，mediaMes是表对象   var oRow1=mediaMes.insertRow(mediaMes.rows.
IE和火狐中取消冒泡
peter_666的专栏
11-29 863
/功能:停止事件冒泡 function stopBubble() {     $(function() {            var e = getEvent();         if (window.event) {                  e.returnValue=false;                     e.cancelBubble=true;
web前台设计技巧
peter_666的专栏
10-29 780
1.div中加入ul时问题 代码:             qqqqqqqqqq         qqqqqqqqqq     结果如下：             qqqqqqqqqq         qqqqqqqqqq     结果如图： 现在有要求div的背景自适应：  在div中加入 overflow:hidden
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值