html懸掛窗口代碼_浮動窗口的代碼（html/js）

⑴ 彈出窗口的html的代碼是怎麼寫的

1、最基本的彈出窗口代碼

< SCRIPT LANGUAGE="javascript">

< !--

window.open ("page.html")

-- >

< /SCRIPT>

window.open ("page.html") 用於控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。

2、經過設置後的彈出窗口

< SCRIPT LANGUAGE="javascript">

< !--

window.open ("page.html", "newwindow", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no") 

< /SCRIPT>

< SCRIPT LANGUAGE="javascript"> js腳本開始；window.open 彈出新窗口的命令；"page.html" 彈出窗口的文件名；"newwindow" 彈出窗口的名字（不是文件名），非必須，可用空"代替；

3、用函數控制彈出窗口

< script LANGUAGE="JavaScript">

< !--

function openwin() {

window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

}

-->

< /script>

這里定義了一個函數openwin(),函數內容就是打開一個窗口。

4、同時彈出2個窗口

< script LANGUAGE="JavaScript">

< !--

function openwin() {

window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
 

window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

}

-->

< /script>

為避免彈出的2個窗口覆蓋，用top和left控制一下彈出的位置不要相互覆蓋即可。

5、主窗口打開文件1.htm，同時彈出小窗口page.html

< script language="javascript">

< !--

function openwin() {

window.open("page.html","","width=200,height=200")

}

-->

< /script>

⑵ html 彈出窗口有幾種方式

介紹幾種方法：

第一種：javascripts代碼

<SCRIPTLANGUAGE="javascript">

</SCRIPT>

這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。也可以，越前越早執行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。

第二種：

<SCRIPTLANGUAGE="javascript">

</SCRIPT>

第三種：函數控制

下面是一個完整的代碼：
<html>
<head>
<scriptLANGUAGE="javascript">

</script>
</head>
<bodyonload="openwin()">
...任意的頁面內容...
</body>
</html>

上面這三種彈出窗口的代碼都可以應用。

⑶ html彈出懸浮窗口代碼,怎麼實現啊

做到比較簡單
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color:#CCC;
left: 165px;
top: 211px;
display:none;
}
</style>
<script type="text/javascript">
function a(){
a=document.getElementById("a").value;
if(a=="tijiao"){
document.getElementById("apDiv1").style.display="block";
}
}
</script>
</head>

<body>
<input type="button" value="tijiao" id="a" onclick="a()" />
<div id="apDiv1">hello</div>
</body>
</html>

⑷ html想設置一個窗口固定浮動在頁面某個位置的代碼是什麼啊

用 CSS 的 fixed 屬性值，示例：

.infoWin{
position:fixed;
right:10px;
bottom:10px;
width:200px;
height:120px;
}

上述代碼會讓 .infoWin 這個元素固定懸浮在頁面右下方。

⑸ HTML窗口彈出代碼

<!doctype html>

<html>

<head><title>無標題文檔</title></head>

<body>

function MsgBox() //聲明標識符

{

alert("我是對話框的內容"); //彈出對話框

}

</script>

</body>

</html>

(5)html懸掛窗口代碼擴展閱讀：

方法參數詳解

參數解釋：

window.open 彈出新窗口的命令；

'page.html' 彈出窗口的文件名；

'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；

height=100 窗口高度；

width=400 窗口寬度；

top=0 窗口距離屏幕上方的象素值；

left=0 窗口距離屏幕左側的象素值；

toolbar=no 是否顯示工具欄，yes為顯示；

menubar，scrollbars 表示菜單欄和滾動欄。

resizable=no 是否允許改變窗口大小，yes為允許；

location=no 是否顯示地址欄，yes為允許；

status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；

⑹ 在一個網頁中怎樣做一個懸浮窗口，並在右上角有關閉按鈕的。

1、首先打開dw之後，新建一個html簡單項目，輸入項目名稱後，就能新建一個html文件了。

⑺ 浮動窗口的代碼（html/js）

第一種方法:
Html代碼
<html>
<head>
<title>浮動窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/overflow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = $("#b");
var overFlow = $("#over");
b.click(function(){
overFlow.fadeIn();
$("#mask").css("background","#111");
$("#mask").css("opacity","0.8");
})
$("#close").click(function(){
overFlow.fadeOut();
$("#mask").css("background","#fff");
$("#mask").css("opacity","1");
});
drag($("#over"),$("#title"));
}) ;
</script>
</head>
<body>
<div id="over">
<div id="title"><span id="t">這只是一個演示標題</span><span id="close">[ x ]</span></div>
<div id="content">
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>
---This is edited by Alp.
</div>
</div>
<div id="mask"> <a id="b" href="#">click</a></div>
</body>
</html>

Js代碼
function drag(overFlow,title){
title.onmousedown = function(evt){
var doc = document;
var evt = evt || window.event;
var x = evt.offsetX?evt.offsetX:evt.layerX;
var y = evt.offsetY?evt.offsetY:evt.layerY;
if(overFlow.setCapture){
overFlow.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove = function(evt){
evt = evt || window.event;
var xPosition = evt.pageX || evt.clientX;
var yPosition = evt.pageY || evt.clientY;
var newX = xPosition - x;
var newY = yPosition - y;
overFlow.style.left = newX;
overFlow.style.top = newY;
};
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove=null;
doc.onmouseup=null;
};
};
}

css代碼
#over{
position: absolute;
left: 300px;
top: 200px;
border: 1px solid black;
display: none;
background: #cccccc;
cursor: default;
width: 300px;
z-index: 10;
opacity: 1;
}
#title{
border: 1px solid #1840C4;
background: #95B4DC;
padding: 2px;
font-size:12px;
cursor: default;
}
#close{
cursor: pointer;
margin-right: 1px;
overflow: hidden;
}
#content{
border: 1px solid #C2D560;
background: #EFF4D7;
}
#t{
margin-right:145px;
}
#mask{
z-index: 1;
background: #fff;
width: 1024px;
height: 800px;
}
#b{
position: absolute;
left: 200px;
top: 100px;
}
body{
padding: 0px;
margin: 0px;
}
#over{
background: transparent;
}

第二種方法:
消息框遮罩層:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"></iframe><div id="show_upload">nothing...</div>'

頁面載入loading中:<div id="body_loading" onClick="loaded();"><img src="__PUBLIC__/images/body_load.gif"></div>

關閉浮動窗口:<a href="javascript:hideupload()">關閉窗口建議用小圖片</a>

打開浮動窗口:<a href="javascript:showupload('admin.php')">打開浮動</a>
// 消息框loading
function loading(){
var o = $('#body_loading');
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px");
o.fadeIn("fast");
}
// 消息框消失
function loaded(){
var o = $('#body_loading');
o.fadeOut("fast");
}
// 隱藏浮動窗口
function hideupload(){
$('#show_upload').hide();
$('#show_upload_iframe').hide();
}
// 彈出浮動窗口
function showupload(ajaxurl){
loading();
var o=$('#show_upload');
var f=$('#show_upload_iframe');
var top = 200;
$.ajax({
url: ajaxurl,
//cache: false,
success: function(res){
loaded();
o.html(res);
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
if($(document).scrollTop()>200){
top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);
}
o.css("top",top+"px");
f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')});
f.show();
o.show();
}
});
}

導航:首頁 > 編程語言 > html懸掛窗口代碼

html懸掛窗口代碼

(5)html懸掛窗口代碼擴展閱讀：

與html懸掛窗口代碼相關的資料

友情鏈接