html如何实现将设计好的页面内容作为弹窗显示？

html-css09

html如何实现将设计好的页面内容作为弹窗显示？,第1张

首先要写一个弹窗内容区div，把要显示在弹窗里面的标签放在弹窗的div里面就行，当弹窗打开的时候，弹窗里面的内容就是你布局的内容。这需要结合JavaScript，纯html是实现不了的。

纯HTML是没法实现的，纯HTML只能通过A标签实现弹出新页。用JS实现很方便的，现在浏览器拦截很智能，只要你的弹出页面不是连接到外站一般不会拦截。如果你想弹外站的页面最好是用鼠标点击或者其他方式去激活。

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号，弹窗会消失