<script type="text/javascript">
var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;
function DialogShow(showdata,ow,oh,w,h){ //显示DIV置顶层
var objDialog = document.getElementById("DialogMove");
if (!objDialog)
objDialog = document.createElement("div");
t_DiglogW = ow;
t_DiglogH = oh;
DialogLoc();
objDialog.id = "DialogMove";
var oS = objDialog.style;
oS.display = "block";
oS.top = t_DiglogY + "px";
oS.left = t_DiglogX + "px";
oS.margin = "0px";
oS.padding = "0px";
oS.width = w + "px";
oS.height = h + "px";
oS.position = "absolute";
oS.zIndex = "5";
oS.background = "#FFF";
oS.border = "solid #000 1px";
objDialog.innerHTML = showdata;
document.body.appendChild(objDialog);
}
function DialogHide(){ //关闭div置顶层的主调
ScreenClean();
var objDialog = document.getElementById("DialogMove");
if (objDialog)
objDialog.style.display = "none";
}
function DialogLoc(){ //计算div窗口位置
var dde = document.documentElement;
if (window.innerWidth){
var ww = window.innerWidth;
var wh = window.innerHeight;
var bgX = window.pageXOffset;
var bgY = window.pageYOffset;
}else{
var ww = dde.offsetWidth;
var wh = dde.offsetHeight;
var bgX = dde.scrollLeft;
var bgY = dde.scrollTop;
}
t_DiglogX = (bgX + ((ww - t_DiglogW)/2));
t_DiglogY = (bgY + ((wh - t_DiglogH)/2));
}
function ScreenConvert(){ //整个页面区域加屏蔽层
var objScreen = document.getElementById("ScreenOver");
if(!objScreen)
var objScreen = document.createElement("div");
var oS = objScreen.style;
objScreen.id = "ScreenOver";
oS.display = "block";
oS.top = oS.left = oS.margin = oS.padding = "0px";
if (document.body.clientHeight) {
var wh = document.body.clientHeight + "px";
}else if (window.innerHeight){
var wh = window.innerHeight + "px";
}else{
var wh = "100%";
}
oS.width = "100%";
oS.height = wh;
oS.position = "absolute";
oS.zIndex = "3";
oS.background = "#cccccc";
oS.filter = "alpha(opacity=50)";
oS.opacity = 40/100;
oS.MozOpacity = 40/100;
document.body.appendChild(objScreen);
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "hidden";
}
function ScreenClean(){ //清屏
var objScreen = document.getElementById("ScreenOver");
if (objScreen)
objScreen.style.display = "none";
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "visible";
}
function Demo(string){ //主调
ScreenConvert();
var ShowDiv="<div style=\"padding:10px;\">"+string+" <br /><br /><input type=\"button\" onclick=\"DialogHide();\" value=\" 关闭 \"></div>";
DialogShow(ShowDiv,250,120,300,100);
}
</script>
<style>
body{margin:0}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
Demo('________');
//-->
</SCRIPT>
分享到:
相关推荐
在实现div置顶滚动的效果时,主要涉及到CSS的`position`属性。`position`属性有多个值,如`static`(默认值)、`relative`、`absolute` 和 `fixed`。在这里,我们需要使用 `fixed` 值,它会使元素相对于浏览器窗口...
在网页设计中,`iframe` 是一种非常有用的元素,它允许我们在一个页面中嵌入另一个网页。当有多个 `iframe` 并存时,可能会出现重叠...在实践中,根据具体项目的需求和结构,可能需要进行微调和测试以达到最佳效果。
在网页设计和开发中,有时候我们需要处理多个`iframe`(内联框架)并实现特定的交互效果,例如只显示其中一个`iframe`中的`div`元素,并确保它在所有其他元素之上,即处于最上层显示。这样的需求通常出现在需要创建...
JavaScript网页置顶是一种常见的网页交互效果,它允许页面上...通过理解和实践这些知识点,开发者可以有效地在网页上实现置顶效果,提升用户体验。同时,随着Web技术的不断发展,网页置顶也有更多创新和优化的可能性。
在网页设计中,为了提供更好的用户体验,经常需要实现一种效果:当用户滚动页面超过一屏时,顶部导航栏会固定在浏览器窗口的顶部,这种效果通常被称为“置顶工具条”或“固定顶部导航”。本教程将介绍如何使用jQuery...
但有时,用户可能希望自定义置顶的方式,比如通过JavaScript或者CSS代码来实现更个性化的置顶效果。这时,就需要对HTML、CSS以及JavaScript有一定的了解。例如,你可以使用JavaScript来控制文章的显示顺序,通过CSS...
可以使用position: fixed属性实现置顶效果。 ```css #online客服 { position: fixed; bottom: 0; right: 0; /* 其他样式 */ } ``` 3. jQuery事件处理:利用jQuery的事件监听功能,实现点击打开/关闭客服窗口、...
在网页设计中,有时我们需要创建一种效果,使得页面上的某个元素在用户滚动页面时始终保持在视口顶部,这种效果被称为“置顶悬浮”或者“固定定位”。jQuery 提供了一个便捷的方式来实现这一效果,通过监听滚动事件...
总之,“jQuery百度经验步骤置顶代码”是一个实用的网页特效,通过jQuery的特性结合CSS和DOM操作,实现了步骤条的动态置顶效果。开发者在学习和使用这个代码时,不仅可以提升自己的jQuery技能,还能了解如何创建交互...
8. 当滚动回到div的原始位置时,通过检查`position`属性并将其恢复为`static`,以取消固定效果。 总的来说,这个实例展示了如何利用JavaScript(特别是jQuery库)和CSS来创建一个在页面滚动时固定在顶部的导航栏。...
<div id="section1">Section 1 Content</div> ``` 然后,在Swiper.js配置中启用`hashnav`和`hashnavWatchState`选项,以启用基于哈希的导航,并确保滑动状态与URL中的哈希同步: ```javascript var swiper = new ...
综上所述,通过jQuery和CSS,我们可以轻松地实现页面滚动时导航栏的悬浮置顶效果。在实际开发中,可以根据项目需求进行微调,比如添加更复杂的动画效果,或者调整导航栏在不同滚动位置的样式。这个过程不仅展示了...
阿里云首页的图片旋转效果是网站设计中一种常见的动态展示手法,它能够吸引用户的注意力,增加网站的互动性和视觉吸引力。这种效果通常是通过JavaScript库,如JQuery来实现的。以下我们将深入探讨如何使用JQuery实现...
通过理解zTree的工作原理和事件机制,我们可以轻松实现节点的上移、下移、置顶和置底,以及隐藏div等交互效果,从而提升应用的易用性和用户体验。在实际开发中,结合项目需求,灵活运用zTree的各种特性,将有助于...
本示例"js仿淘宝网店版左侧弹出菜单(可置顶)"旨在教你如何利用JavaScript技术实现类似淘宝网店的左侧弹出菜单,该菜单具备可置顶和展开/收起的功能,从而为用户带来更加便捷的操作体验。 首先,我们要理解...
可以根据需求调整颜色和边框样式,以创建出美观且引人注目的置顶文章效果。 通过以上方法,你不仅可以轻松设置WordPress文章置顶,还能通过视觉差异使读者清楚地识别出置顶文章。这些自定义调整有助于提升用户体验...
在本资源中,我们主要关注的是使用jQuery库来创建一个置顶导航的新闻图片Tab选项卡切换效果。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等任务。这个源码示例将...
在网页设计中,布局是至关重要的元素之一,尤其对于那些包含多个栏目的页面。"网页左栏目右栏目相互移动"这个主题涉及到...在实际项目中,还需要考虑响应式设计,确保在不同设备和屏幕尺寸下都能呈现出良好的视觉效果。