javascript+html5+css3自定義彈出窗口效果
更新時間：2017年10月26日 14:26:19 作者：冷月葬殘花
這篇文章主要為大家詳細(xì)介紹了javascript+html5+css3自定義彈出窗口效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js自定義彈出窗口效果展示的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
源碼：
1.demo.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>自定義彈出窗口</title>
<script type="text/javascript" src="js/myLayer.js"></script>
<style type="text/css">
button{
width: 50px;
height: 50px;
border: 1px solid blue;
background-color: blue;
color: red;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 2px gray;
-moz-box-shadow: 2px 2px 2px gray ;
box-shadow: 2px 2px 2px gray ;
}
button:hover{
background-color: green;
cursor: pointer;
}
</style>
<script type="text/javascript">
function openWindow() {
new MyLayer({
top:"10%",
left:"10%",
width:"80%",
height:"80%",
title:"我的標(biāo)題",
content:"操作成功"
}).openLayer();
}
</script>
</head>
<body>
<button type="button" onclick="openWindow()">打開彈窗</button>
</body>
</html>
2.myLayer.js
/**
* Created by zhuwenqi on 2017/6/16.
*/
/**
* @param options 彈窗基本配置信息
* @constructor 構(gòu)造方法
*/
function MyLayer(options) {
this.options = options ;
}
/**
* 打開彈窗
*/
MyLayer.prototype.openLayer = function () {
var background_layer = document.createElement("div");
background_layer.style.display = "none";
background_layer.style.position = "absolute";
background_layer.style.top = "0px";
background_layer.style.left = "0px";
background_layer.style.width = "100%";
background_layer.style.height = "100%";
background_layer.style.backgroundColor = "gray";
background_layer.style.zIndex = "1001";
background_layer.style.opacity = "0.8" ;
var open_layer = document.createElement("div");
open_layer.style.display = "none";
open_layer.style.position = "absolute";
open_layer.style.top = this.options.top === undefined ? "10%" : this.options.top;
open_layer.style.left = this.options.left === undefined ? "10%" :this.options.left;
open_layer.style.width = this.options.width === undefined ? "80%" : this.options.width;
open_layer.style.height = this.options.height === undefined ? "80%" : this.options.height;
open_layer.style.border = "1px solid lightblue";
open_layer.style.borderRadius = "15px" ;
open_layer.style.boxShadow = "4px 4px 10px #171414";
open_layer.style.backgroundColor = "white";
open_layer.style.zIndex = "1002";
open_layer.style.overflow = "auto";
var div_toolBar = document.createElement("div");
div_toolBar.style.textAlign = "right";
div_toolBar.style.paddingTop = "10px" ;
div_toolBar.style.backgroundColor = "aliceblue";
div_toolBar.style.height = "40px";
var span_title = document.createElement("span");
span_title.style.fontSize = "18px";
span_title.style.color = "blue" ;
span_title.style.float = "left";
span_title.style.marginLeft = "20px";
var span_title_content = document.createTextNode(this.options.title === undefined ? "" : this.options.title);
span_title.appendChild(span_title_content);
div_toolBar.appendChild(span_title);
var span_close = document.createElement("span");
span_close.style.fontSize = "16px";
span_close.style.color = "blue" ;
span_close.style.cursor = "pointer";
span_close.style.marginRight = "20px";
span_close.onclick = function () {
open_layer.style.display = "none";
background_layer.style.display = "none";
};
var span_close_content = document.createTextNode("關(guān)閉");
span_close.appendChild(span_close_content);
div_toolBar.appendChild(span_close);
open_layer.appendChild(div_toolBar);
var div_content = document.createElement("div");
div_content.style.textAlign = "center";
var content_area = document.createTextNode(this.options.content === undefined ? "" : this.options.content);
div_content.appendChild(content_area);
open_layer.appendChild(div_content);
document.body.appendChild(open_layer);
document.body.appendChild(background_layer);
open_layer.style.display = "block" ;
background_layer.style.display = "block";
};
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于微信小程序使用wxParse解析html的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
javascript full screen 全屏顯示頁面元素的方法
要想讓頁面的某個元素全屏顯示，就像在網(wǎng)頁上看視頻的時候，可以全屏觀看一樣，該怎么實現(xiàn)呢2013-09-09
ES6學(xué)習(xí)筆記之let、箭頭函數(shù)和剩余參數(shù)
ES6為我們在函數(shù)的使用上也提供了許多的便捷的東西,下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)筆記之let、箭頭函數(shù)和剩余參數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了js+canvas實現(xiàn)刮刮獎功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09 
Three.js使用OrbitControls后修改相機旋轉(zhuǎn)方向無效解決辦法
three.js是用javascript寫的基于webGL的第三方3D庫,下面這篇文章主要給大家介紹了關(guān)于Three.js使用OrbitControls后修改相機旋轉(zhuǎn)方向無效的解決辦法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01 
javascript getElementsByTagName
DC大神為早期不支持getElementsByTagName的瀏覽器寫的hack，當(dāng)然與原生的不能同日而言，原生的用到緩存機制呢。
2011-01-01 
利用JavaScript為句子加標(biāo)題的3種方法示例
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript為句子加標(biāo)題的3種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01 
Function是javascript里最常用的一個概念，javascript里的function是最容易入手的一個功能，但它也是javascript最難理解最難掌握的一個概念。這篇文章主要介紹了JavaScript中的Function類型的相關(guān)資料，一起看下吧
2016-07-07 
這篇文章主要介紹了webpack3.0升級4.0的方法步驟,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04