html中,怎么做一个弹出式的大小固定的小窗口?

html-css07

html中,怎么做一个弹出式的大小固定的小窗口?,第1张

JavaScript 弹窗共有三种

1、window.alert("sometext")

2、window.confirm("sometext")

3、window.prompt("sometext","defaultvalue")

但是这3种方法都不能做一个大小固定的小窗口,要做大小固定的弹窗,需要我们自己在HTML文档中编写:

HTML:

.btn:点击button后弹窗出现

.close:点击X后弹窗消失

.con:是弹窗内容区

.bk:屏蔽页面其他内容,弹窗出现时,弹窗的z-index最大,其他内容不能进行操作

CSS:

JQ:

页面展现效果:

1、点击按钮

2、出现一个自己控制的500*200的弹框,同时浏览区背景为灰色

3、点击红色区域右上角X号,弹窗会消失

你先做好弹窗样式,然后把它隐藏;之后用时间函数控制在程序加载完毕后多少秒内把这个属性元素改为显示属性,这样就可以实现你说的弹窗;

也可以用js的弹窗来实现;或者你可以搜“jq弹窗特效”,哪里会有很多例子。希望能帮到您!

问题分析:

HTML中的浮动窗口,可以使用CSS的定位方式完成,同时使用这种方式来完成这个功能也是一种较为简单的方式,只需要有HTML以及CSS的知识就可以完成了。

举例如下:

在以下示例中,将演示页面左右两侧分别放置一个高度为500像素,宽度为200像素的浮动窗口。示例中使用的定位方式为:固定定位(fixed),所有它们将永远的跟随页面进行滚动。

HTML代码:

<div id="left">

    <p>我是左侧浮动窗口的内容</p>

</div>

<div id="right">

    <p>我是右侧浮动窗口的内容</p>

</div>

CSS代码:

body{

    /*

     * 为body标签设置背景仅仅是为了演示效果。

     * 与浮动窗口本身无关。

     */

    background-color: #ccc

}

#left, #right{

    position: fixed

    top: 100px

    width: 200px

    height: 500px

    line-height: 500px

    text-align: center

    border: 1px solid #000

    background-color: #FFF

}

#left{

    left: 50px

}

#right{

    right: 50px

}

页面初始化效果: