1. html中浮动窗口怎么做啊就是一个小窗口飘在在页面上那种
需要浮动的话,只需要在样式上的position设置fixed即可。
比如:
<div style="position:fixed; z-index:1;">
</div>
这样写就浮动了,然后只需要用top、bottom、left、right来定位就行了
如果需要飘来飘去的浮动,需要配合js来完成,js可以去牛图库上找,里面有很多插件,改下样式就可以使用了。
2. H5页面中如何实现点击跳转
你可以用意派Epub360在线H5页面制作工具实现“点击跳转”,具体操作非常简单。
1.添加文字或图片按钮(也就是你要点击的对象)。
若在操作过程中遇到其他问题,你还可以在意派的教程中心搜索关键词查找相应的教程,非常适合新手自学。
3. html 怎么点击一个按钮弹出一个提示框
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html,输入问题基础代码。
4. html点击按钮弹出窗口如何实现
实现原理:display:none/block;把代码直接复制看效果
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.firstBoxh5{
font-size:30px;
color:#000;
font-weight:700;
}
.firstBoxtable{
border:1pxsolid#E6E6E6;
margin:15px0px;
}
.firstBoxtablethead{
background:#E6E6E6;
}
.firstBoxtabletrtd{
width:150px;
text-align:center;
}
.firstBoxbutton{
width:100px;
height:40px;
background:#E6E6E6;
border:1pxsolid#C7D3E6;
text-align:center;
line-height:40px;
font-size:16px;
color:#000;
cursor:pointer;
}
#twoBox{
margin:20px0px0px;
background:#E6E6E6;
height:250px;
width:310px;
position:relative;
display:none;
}
#twoBox.twoBox_lever{
width:290px;
height:230px;
background:#fff;
border:1pxsolid#ccc;
border-radius:5px;
position:absolute;
right:0;
top:0;
left:0;
bottom:0;
margin:auto;
}
.twoBox_lever_two{
width:calc(100%-10px);
height:calc(100%-10px);
padding:5px;
}
.twoBox_lever_two.two_title{
width:100%;
height:40px;
background:#E6E6E6;
border:1pxsolid#ccc;
border-radius:5px;
}
.twoBox_lever_two.two_titlep{
font-size:16px;
color:#000;
line-height:40px;
padding-left:10px;
font-weight:700;
}
.twoBox_lever_twoform{
width:calc(100%-20px);
margin:10px;
border-bottom:1pxsolid#ccc;
height:calc(100%-100px);
}
.twoBox_lever_twoforminput{
height:20px;
line-height:20px;
padding:0px10px;
margin:5px;
cursor:pointer;
}
.twoBox_lever_two.two_footer{
height:40px;
text-align:right;
padding-right:10px;
}
.twoBox_lever_two.two_footerbutton{
height:30px;
background:#E6E6E6;
border:1pxsolid#C7D3E6;
text-align:center;
line-height:30px;
font-size:16px;
color:#000;
cursor:pointer;
}
.twoBox_lever_two.two_footerbutton:first-of-type{
width:120px;
padding:0px10px;
}
.twoBox_lever_two.two_footerbutton:last-of-type{
width:50px;
}
.show{
display:block!important;
}
</style>
</head>
<body>
<divstyle="margin:10px;">
<!--第一部分-->
<divclass="firstBox">
<h5>已有的用户:</h5>
<table>
<thead>
<tr>
<th>名字</th>
<th>邮箱</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名</td>
<td>[email protected]</td>
<td>xingtuan</td>
</tr>
</tbody>
</table>
<buttonid="button">创建新用户</button>
</div>
<!--第二部分-->
<divid="twoBox">
<divclass="twoBox_lever">
<divclass="twoBox_lever_two">
<divclass="two_title">
<p>创建新用户</p>
</div>
<form>
<labelstyle="float:left">名字:
<inputtype="text"placeholder="请输入名字">
</label>
<labelstyle="float:left">邮箱:
<inputtype="text"placeholder="请输入邮箱">
</label>
<labelstyle="float:left">密码:
<inputtype="password"placeholder="请输入密码">
</label>
</form>
<divclass="two_footer">
<button>创建一个用户</button>
<button>取消</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
window.onload=function(){
document.getElementById("button").onclick=function(){
document.getElementById("twoBox").classList.add("show")
}
}
</script>
</html>
5. 如何使用HTML实现点击一个链接打开新窗口
这个在网页前端中非常常用,如果你JS 部分学好了 这个也是非常容易的了 下面是具体的实现方法。
【最基本的弹出窗口代码】;其实代码非常简单:;
<SCRIPTLANGUAGE=";<!--;window.open('page.ht;-->;</SCRIPT>;因为这是一段javascript代码,所以它们应;Window.open('page.ht;这一段代码可以加入HTML的任意位置,加入到&l;【
【最基本的弹出窗口代码】
其实代码非常简单:
<SCRIPTLANGUAGE="javascript">
<!--
window.open('page.html')
-->
</SCRIPT>
因为这是一段javascript代码,所以它们应该放在<SCRIPT LANGUAGE ="javascript">标签和</script>之间。<!--和-->是对一些版本低的浏览器起作用,在这些老浏览器中如果不支持javascript,不会将标签中的代码作为文本显示出来。
Window.open ('page.html')用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。 用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HTML的任意位置,加入到<head>和</head>之间也可以,位置越靠前执行越早,尤其是页面代码较长时,又想使页面早点弹出就尽量往前放。
【经过设置后的弹出窗口】
下面再说一说弹出窗口外观的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。
<SCRIPTLANGUAGE="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 弹出窗口的名字(不是文件名),可用空 ″代替;
height=100 窗口高度;
top=0 窗口距离屏幕上方的像素值;
left=0 窗口距离屏幕左侧的像素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏;
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
</SCRIPT> js脚本结束。
【用函数控制弹出窗口】
下面是一个完整的代码。
<html>
<head>
<scriptLANGUAGE="javascript">
<!--
functionopenwin(){
window.open("page.html","newwindow","height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,
location=no,status=no";)
//写成一行
}
-->
</script>
</head>
<bodyonload="openwin()">
...任意的页面内容...
</body>
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢?
方法一:<body onload="openwen()"> 浏览器读页面时弹出窗口;
方法二:<body onunload="openwen()"> 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:<a href="#" onclick="openwin()">打开一个窗口</a>
注意:使用的"#"是虚连接。
方法四:用一个按钮调用:<input type="button" onclick="openwin()" value="打开窗口">
【主窗口打开文件1.htm,同时弹出小窗口page.html】
将如下代码加入主窗口<head>区:
<scriptlanguage="javascript">
<!--
functionopenwin(){
window.open("page.html","","width=200,height=200";)
}
//-->
</script>
加入<body>区:
<a href="http://www.xsteach.com/register?spread_id=6065805" onclick="openwin()">open</a>即可。
【弹出的窗口之定时关闭控制】
下面我们再对弹出窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则…),让它在10秒钟后自动关闭是不是更酷了?
首先,将如下代码加入page.html文件的<head>区:
<scriptlanguage="javascript">
functioncloseit(){
setTimeout("self.close()",10000)//毫秒
}
</script>
然后,再用<body onload="closeit()">这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)
【在弹出窗口中加上一个关闭按钮】
<form>
<INPUTTYPE='BUTTON'value='关闭'onClick='window.close()'>
</form>
呵呵,现在更加完美了!
原来的HTML标准中可以用
<a href="document.html" target="_blank"> 打开一个新窗口</a>
但新的HTML标准严格上是不允许的。可以采用以下代码:
<ahref="document.html"rel="external">打开一个新窗口</a>
javascript:
functionexternallinks(){
if(!document.getElementsByTagName)return;
varanchors=document.getElementsByTagName("a");
for(vari=0;i<anchors.length;i++){
varanchor=anchors[i];
if(anchor.getAttribute("href")&&
anchor.getAttribute("rel")=="external")
anchor.target="_blank";
}
}
window.onload=externallinks;
我们在使用<a>标签时,常常会使用它的href属性为 一段javasrcipt来实现某些功能。比如关闭一个窗口:<a href="javascript:windows.close();">,或者弹出一个新的窗口<a href="javascript:windows.open('url');">。这样来实现窗口的操作。
当然也有人会用 onclick事件来实现打开或者关闭窗口<a href="#" onclick="windows.close();">, 打开新窗口<a href="#" onclick="windows.open(url);">。那么他们之间到底有什么区别呢?下面来好好分析一下
<a href="javascript:windows.close();">关闭窗口时,浏览器不会弹出窗口关闭的对话框,而<a href="#" onclick="windows.close();">,浏览器就会弹出窗口关闭的对话框。
<a href="javascript:windows.open('url');">打开一个新的窗口时,会使原来的窗口发生页面回传,从而导致 css样式无效,如果是动态页面的话还可能导致页面变空白。所以还是慎用这个方法。<a href="#"
onclick="windows.close();">,是完全在客户端执行的动作,页面不会产生回传,不会刷新页面。
<li onclick="javascript:window.open
('链接')"> </li>
6. html5如何实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框
通过jquery的show()和hide()函数联合使用,实现弹出窗口。
一、show()和hide()函数解析:
1、show() 方法显示隐藏的被选元素。
注意:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似,但是隐藏的元素不会被完全显示(不再影响页面的布局)。
二、设计一个HTML页面,包括一个简单的弹出窗,和一个显示按钮。其中,调用了jquery的以上两个函数。具体代码如下:
7. 弹出窗口的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>