javascript+html5+css3自定义弹出窗口效果
本文实例为大家分享了js自定义弹出窗口效果展示的具体代码，供大家参考，具体内容如下
效果图：
源码：
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:"我的标题",
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 构造方法
*/
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("关闭");
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";
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍javascript+html5+css3自定义提示窗口，包括了javascript+html5+css3自定义提示窗口的使用技巧和注意事项，需要的朋友参考一下 javascript自定义提示窗口效果图： 源码： 1.demo.jsp 2.myAlert.js 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
我正在搜索JavaFX中弹出窗口的示例。我有JavaFX应用程序，有一次我需要一个弹出窗口出现。这个弹出窗口需要一些复杂的输入，我需要处理和检查并返回主应用程序/窗口。 现在的问题是，我在任何地方都找不到一个示例，说明如何在一个JavaFX控制器类中调用Now JavaFX弹出窗口？我只找到了examle如何创建对话框弹出窗口，但找不到基于JavaFX的新弹出窗口示例（我看到了一个解决方案，其中并
-
本文向大家介绍WPF弹出自定义窗口的方法，包括了WPF弹出自定义窗口的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了WPF弹出自定义窗口的方法。分享给大家供大家参考，具体如下： 测试环境: [1]VS2010SP1 [2]WPF(.NET Framework 4)项目 内容简介 WPF工程如何弹出自定义窗口 第一步：自定义个窗口 为当前项目新添个Window项，XAML部份的代码略，
-
我正在使用Kendo网格，其中有几个列用于概览行数据。当用户单击添加/编辑按钮时，弹出窗口将显示一些附加数据，其中包括一些复选框。 我在将复选框与当前MVVM模型绑定时遇到问题，因为在添加新行时，Kendo将模型视为变量，而不是数组。这会导致在选中一个复选框（单击）时选中多个复选框。在看了剑道MVVM之后，我打算得到当前弹出窗口的MVVM模型，以便操作一些数据，但没有成功。因此，我将在以下方面寻求
-
问题内容： avaFX 2颜色选择器具有一个按钮，它会弹出一个颜色选择器窗格，如下所示： JavaFX 2颜色选择器 我想做类似的事情，因为我希望自定义窗格在单击按钮时弹出，而在单击其他按钮时消失（在我的情况下，是一些图像缩略图）。实现此目标的最佳方法是什么？我应该使用ContextMenu并以某种方式将窗格添加到MenuItem，还是应该查看其他内容？ 问题答案： 当前的JavaFX 2.2 A
-
JavaFX 2颜色选择器有一个按钮，可以弹出一个颜色选择器窗格，如下所示： 我想做一些类似的事情，我想在点击按钮时弹出一个自定义窗格，然后在点击其他东西时消失（在我的例子中，是一些图像缩略图）。实现这一目标的最佳方式是什么？我应该使用ContextMenu并以某种方式将窗格添加到MenuItem，还是应该查看其他内容？
-
dialog组件使用visible这个prop开控制显示，监听visible赋值给visibleMe v-if=“visibleMe”的方式打开关闭弹窗 关闭的时候令visibleMe=false，但是因为visible是prop，不可以在这个组件内更改，所以visible还是true 所以下次调用它的组件再把visible改成true的时候，并不会触发watch 怎么通过只改dialog组件的代
-
The BrowserWindow module is the foundation of your Electron application, and it exposes many APIs that can change the look and behavior of your browser windows. In this tutorial, we will be going over