发帖结束后 关闭层 并刷新页面
-
如何实现类似“论坛发帖那样的弹出层效果”
发帖结束后 关闭层 并刷新页面
展开阅读全文
-
等级
本版专家分：100 -
隐藏显示, + ruanat="server" 后台控制刷新
-
等级
本版专家分：0勋章
-
- 签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
-
-
我想知道具体代码怎么实现
-
等级
本版专家分：0
-
笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑
-
等级
本版专家分：894 -
弹出层代码网上很多，弹出层之后点击关闭刷新页面，只需要点击事件中加入：window.location.href=window.location.href;
-
等级
本版专家分：6943 -
<style>
#otbl {
border: 1px solid #8F8F8F;
border-collapse: collapse;
}
#otbl td {
border: 1px solid #8F8F8F;
width: 60px;
height: 30px;
}
#odiv {
width:200px;
height:100px;
border: 2px solid #D0D0D0;
background-color:#fff;
position:absolute;
display:none;
}
</style>
<script type="text/javascript">
<!--
var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
var CancelBubble = function(e){
var e = e || window.event;
try{
e.cancelBubble = true;
}catch(ex){
try{
e.stopPropagation();
}catch(e){}
}
}
var getTarget = function(e){
return e.srcElement || e.target;
}
var absPosition = function(element){
var iTop = iLeft = 0;
do{
iTop += element.offsetTop;
iLeft += element.offsetLeft;
}while(element = element.offsetParent);
return {'x': iLeft, 'y': iTop};
}
function showTip(e, obj){
CancelBubble(e);
var e = e || window.event
var otarget = getTarget(e);
$("odiv").style.display = "block";
with($("odiv").style){
display="block";top=absPosition(otarget).y+"px";left=(absPosition(otarget).x+otarget.offsetWidth)+"px";
}
$("odiv").innerHTML = obj.innerText || obj.textContent;
document.onmouseover = function(){
$("odiv").style.display = "none";
document.onmouseover = null;
}
$("odiv").onmouseover = function(e){
var e = e || window.event;
CancelBubble(e);
}
}
//-->
</script>
<table id="otbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td onmouseover="showTip(event, this)">ws_hgo2 </td>
</tr>
<tr>
<td>3</td>
<td onmouseover="showTip(event, this)">ws_hgo3</td>
</tr>
<tr>
<td>4</td>
<td onmouseover="showTip(event, this)">ws_hgo4</td>
</tr>
</tbody>
</table>
<div id="odiv">
</div>
举个例子 不知道是不是你要的
-
等级
本版专家分：15008勋章
-
-
黄花
2009年10月 Web 开发大版内专家分月排行榜第二
2009年9月 Web 开发大版内专家分月排行榜第二
-
-
<script type="text/javascript">
var docEle = function()
{
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id)
{
var m = "mask";
if (docEle(_id)) document.body.removeChild(docEle(_id));
if (docEle(m)) document.body.removeChild(docEle(m));
//mask遮罩层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
_scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth + "px";
newMask.style.height = _scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#33393C";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);
//新弹出层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDivWidth = 400;
newDivHeight = 200;
newDiv.style.width = newDivWidth + "px";
newDiv.style.height = newDivHeight + "px";
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = " ";
document.body.appendChild(newDiv);
//弹出层滚动居中
function newDivCenter()
{
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
}
if(document.all)
{
window.attachEvent("onscroll",newDivCenter);
}
else
{
window.addEventListener('scroll',newDivCenter,false);
}
//关闭新图层和mask遮罩层
var newA = document.createElement("div");
newA.innerHTML ="取消";
var newB = document.createElement("TEXTAREA");
newB.setAttribute("cols","40");
newB.setAttribute("rows","10");
newA.onclick = function(){
if(document.all)
{
window.detachEvent("onscroll",newDivCenter);
}
else
{
window.removeEventListener('scroll',newDivCenter,false);
}
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newB);
newDiv.appendChild(newA);
}
</script>
<body>
<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">弹出层</a>
</body>
-
等级
本版专家分：23399
- 微信小程序实现常见弹出层效果
其实这个效果实现起来很简单，就是通过三目运算符来控制遮罩层的显示和隐藏 贴代码了： 规则按钮： <text class='rule' bindtap='showRule'>规则</text> 遮罩层：我这个数据是从...
- 手机端弹出层弹出时弹出层的内容滚动，同时禁止body内容滚动
最近做的一个项目，手机端的网站，请问弹出层弹出的时候禁止页面底下的body页面内容滚动，但是同时又需要弹出层里面额内容可以滚动，这种效果怎么实现，试过获取页面的scrollTop，然后弹出层出现后给也页面scrollTop...
- vue.js实现点击按钮和弹出层其他位置弹出层消失方法
这其实是一个很常见的弹出层效果，鼠标点击按钮切换弹出层的显示，点击其他区域弹出层消失，用javascript绑定事件可能几行代码就搞定了，但是vue.js的状态驱动模式和javascript的事件驱动模式是不同的，下面是使用...
- layer弹出层的点击事件小结
以前很早就接触弹出层，积累了很多demo，并且也自己用js原生实现过一些类似的效果，甚至看了慕课的web组件开发弹出层效果，但是用的时候发现还是花费了很多时间。 首先是自己写的只是用js实现了类似的功能，很多还...
- 小程序弹出层---史上最简单写法,已解决滚动穿透问题
1、实现小程序弹出层非常简单：只需要在元素内引用一下这些标签即可实现， style="position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index:999;background-color:rgba(0,0,0,0.5);" 背景颜色自己
- element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇
element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面？ bug演示： ...将dialog组件剪贴到最父级div...以上就是关于“ element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇 ” 的全部内容。 ...
- layer弹出层自动调节位置
项目中有弹出层的内容是不固定的，根据情况可能变长变短，于是就要求做layer弹出层的大小自适应，查询了api后发现 layer.iframeAuto方法可以实现，这里吐槽一点，ie浏览器的html没有被body撑大，而iframeAuto方法是...
- 使用layer.js弹出一个iframe层（好用的弹出层插件）
... 最近参与的一个客户管理项目里查看用户信息时发现这个效果很好用， 需要的效果是点击名字在屏幕中心出现弹窗，且弹窗有最大化按钮，点击后出现全页面。 这个效果用layer的iframe层来实现的话迷之方便... //弹出...
- jQuery实现 弹出层效果
jQuery实现 弹出层效果 点击弹出层：弹出弹出层 点击阴影：关闭弹出层 点击“关闭”关闭弹出层 整体代码如下： &lt;!DOCTYPE html&gt; &lt;html xmlns="...
- 微信小程序：自定义弹出层
自定义弹出层，在弹出层中可键入任意内容。
- js弹框 父窗口弹出子窗口 以及 JS实现弹出层效果
网址 : http://blog.csdn.net/dodott/article/details/42113579
- html+css源码之实现登录弹出框遮罩层效果
在web开发中，很多网站都做了一些特别炫丽的效果，比如用户登录弹框遮罩层效果，本文章向大家介绍css如何实现登录弹出框遮罩层效果，需要的朋友可以参考一下本文章的源代码。 html+css实现登录弹出框遮罩层效果,源...
- div+css+js实现弹出框
原理：在原页面的基础上添加两个格，一个是弹出层，一个是遮罩层，即背景层。这两个div和原始页面是在一个文件中，首先通过设置display：none;让这两个div不显示，然后通过给弹出框按钮和关闭按钮绑定事件...
- layer弹出层自适应页面大小解决方案
前两天在Vue中引入了Vue-layer插件，实现了弹出层效果。不过由于是在22寸屏下开发的，没多想，弹出层的area的长宽就设定的都是800px，效果还很好。结果那给用户看，他们是12寸的笔记本。弹出层直接撑爆了页面，无法...
- 非常好的web弹出层框架 -- layer
1，关于web弹出层 之前做web弹出层，使用的是jqueryui，那个复杂，那个大。 而且样式怪怪的。而且文件很大。 关于layer layer是一款近年来口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的...
- jQuery弹出层效果 弹出div窗口
转自：http://blog.csdn.net/u013239233/article/details/52292763<!DOCTYPE html><html xmlns="...&...jQuery弹出层效果</title><meta content="
- html+js/jquery实现弹出层效果
在做网页的时候，弹出层是个很好用的东西，它既可以显示出我们想要的内容，又无需重新加载，而且弹出层的样式还可以按我们想要的效果改动，今天就来说一说怎么做一个弹出层。
- Android PopupWindow 实现自定义弹出层
最近做的android项目，需要实现弹出层，并灰掉弹出层后面的部分。大致需要做的效果为，点击more时，弹出一层只遮罩中间部分(由图一到图二)，效果图如下(个人随便写的样式，勿怪哈)，废话不说，直接上思路代码。 ...
- jQuery点击空白处隐藏弹出层
主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。演示 Demo,效果源码： CSS代码: * { padding: 0; margin: 0; } #btnShow{ ...
- element-ui框架的el-dialog弹出框被遮罩层挡住了
如图： 解决办法 在el-dialog标签里添加 :modal-...文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...
- layer 弹出iframe层 去掉滚动条
layer弹出iframe 层 自带滚动条
- 【Jquery】jquery点击按钮弹出div层
1、在jquery中，点击一个按钮弹出DIV层对话框的实例。... 先看看效果： 弹出层效果： 2、jsp中实现弹出层代码，先设置id值，如下： 3、js代码中【弹出层一】代码如下： js代码中【弹出层二】代码如下：
- Bootstrap警告框、弹出提示层、模态框的js插件效果总结
经常会在bootstrap项目中遇到警告框、弹出提示层、弹出模态框组件等等场景应用。 使用前准备： ```插件使用之前，请先导入如下文件：``` jquery.min.js bootstrap-alert.js bootstrap.css 它的警告框插件...
- layer 弹出层不居中显示问题的解决方法
不居中效果： 解决方法： 在 标签 加上 style="height: 100%
- JS弹出遮罩层后底部页面不滚动实现
在我们开发过程中，我们经常会遇到这样的问题，在页面上弹出一个弹层，但是底部页面却可以滚动，本文实现JS弹出遮罩层后底部页面不滚动效果。首先效果如图，这里我们需要点击页面头部一个按钮才出现弹层，这里是弹层...
- 用jQuery实现弹出窗口弹出div层
无论是改变浏览器窗口大小还是下拉滚动条，这个弹出层都能始终保持居中；点击页面的关闭按钮，弹出层消失，页面恢复原样。 这里借鉴之前的一篇文章《基于jQuery的固定飘浮层》，使弹出窗口可以始终固定在浏览器的...
- div+css实现简单的弹出窗（背景变灰色）
自己做了一个网站，需要用到弹出框的功能，以前没做过这个，就去网上查了下资料，然后试着写了一个最简单的弹出框效果。 需求：点击弹出框按钮，在原页面基础上弹出一个弹出框，并且背景要变成灰色，原页面不能被...
- layer使用post发送请求加载数据
使用layer.open 打开一个弹出框后，（通过属性 content 加载弹出框中的内容，因为我 需要在加载弹出框后，发送一个url请求动态加载数据，所以type设置为2，那么问题来了，当url的参数过大时，GET 请求就搞不定了，而...
- 移动端和PC端遮罩层弹出后,页面禁止滚动的解决方法
pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条，达到无法滚动的效果。 也就是说给body添加overflow：hidden属性即可，IE6、7下不会生效，需要给html增加overflow:hidden属性。 解决方案移动端 ...
- div蒙层效果的制作
在进行网站开发的时候，为了使得网页界面互动性更佳，用户体验效果更...第一步：点击某个链接或者按钮，调用函数弹出div和设置蒙层效果。 [修改密码] 第二步：建弹出框的div 用户帐号： 原 密 码： 新 密