文字添加响应事件，js动态加载CSS, js弹出DIV
文字添加响应事件，js动态加载CSS, js弹出DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现点击链接弹出层效果</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadCssCode(code){
var style = document.createElement('style');
style.type = 'text/css';
style.rel = 'stylesheet';
try{
//for Chrome Firefox Opera Safari
style .appendChild(document.createTextNode(code));
}catch(ex){
//for IE
style.styleSheet.cssText = code;
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
$(document).ready(function(){
loadCssCode('.popup { width:100%; height:100%; display:none; position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75);}');
loadCssCode('.popup-inner {max-width:700px; width:90%; padding:40px; position:absolute; top:50%;left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); box-shadow:0px 2px 6px rgba(0,0,0,1); border-radius:3px; background:#fff;}');
loadCssCode('.popup-close {width:30px; height:30px; padding-top:4px; display:inline-block; position:absolute; top:0px; right:0px; transition:ease 0.25s all; -webkit-transform:translate(50%, -50%); transform:translate(50%, -50%); border-radius:1000px; background:rgba(0,0,0,0.8); font-family:Arial, Sans-Serif; font-size:20px; text-align:center; line-height:100%; color:#fff;}');
loadCssCode('.popup-close:hover { -webkit-transform:translate(50%, -50%) rotate(180deg); transform:translate(50%, -50%) rotate(180deg); background:rgba(0,0,0,1); text-decoration:none;}');
helpContent();
actionoftext();
});
function actionoftext(){
//----- OPEN
$('[data-popup-open]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
}
function helpContent(){
var boarddiv = "<div class='popup' data-popup='popup-1'>"
+"<div class='popup-inner'>"
+"<h2>Wow! This is Awesome! (Popup #1)</h2>"
+"<p>Donec in volutpat nisi. In quam lectus, aliquet rhoncus cursus a, congue et arcu. Vestibulum tincidunt neque id nisi pulvinar aliquam. Nulla luctus luctus ipsum at ultricies. Nullam nec velit dui. Nullam sem eros, pulvinar sed pellentesque ac, feugiat et turpis. Donec gravida ipsum cursus massa malesuada tincidunt. Nullam finibus nunc mauris, quis semper neque ultrices in. Ut ac risus eget eros imperdiet posuere nec eu lectus.</p>"
+"<p><a data-popup-close='popup-1' href='#'>Close</a></p>"
+"<a class='popup-close' data-popup-close='popup-1' href='#'>x</a>"
+"</div>"
+"</div>";
$(document.body).append(boarddiv);
}
</script>
</head>
<body>
<div style="background-color:yellow">
<!--
<a class="btn" data-popup-open="popup-1" href="#">Open Popup #1</a>
<li data-popup-open="popup-1"><span id="target">testpopup</span></li>
-->
<div>
<div >
<li data-popup-open="popup-1"><span id="target">testpopup</span></li>
</div>
</div>
</body>
</html>
文字添加响应事件，js动态加载CSS, js弹出DIV的更多相关文章
- js实用方法记录-js动态加载css、js脚本文件
js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...
- JavaScript：用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
- js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
- js动态加载css和js
之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjs ...
- 动态加载css,js
function dynamicLoadCss(url) { var head = document.getElementsByTagName('head')[0]; var link = docum ...
- js 动态加载事件的几种方法总结
本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...
- 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法
今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...
- js动态加载以及确定加载完成的代码
利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...
- 用JavaScript动态加载CSS和JS文件
本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...
随机推荐
- 133.throw机制 抛出类类型
#include <iostream> using namespace std; //try尝试执行,抛出throw,throw之后语句不再执行 //catch处理throw的异常 voi ...
- cell的重用
cell的重用 简单来说,就是为了节省内存,系统通过一个重用的表示进行获取重用的控件 1 定义重用的标识 NSString * reuseId = @"hero" //这里的he ...
- ajax的cache缓存的使用方法
ajax中cache缓存的使用: 问题描述: 在IE.360浏览器上提交表单后,保存后的内容不回显(依然显示空或者之前的内容). 原因: 回显内容是使用ajax的get方式的请求查询数据,ajax的c ...
- java高级——生产者消费者问题
多线程是一个很重要的应用,本节讲述多线程中同步问题 public class ThreadDemo { public static void main(String[] args) { Resourc ...
- svn创建分支的做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 1. 首先选择你要创建分支的工作目录,如下图: 2.选择要创建分支的路径.注释以及版本,选择HEADrevision ...
- UVa 10801 Lift Hopping【floyd 】
题意:给出n个电梯,每个电梯的运行时间,每个电梯只能在相应的楼层停靠,而且没有楼梯,再给出想去的楼层,问从0层能否到达想去的楼层,求到达的最短时间 建图还是没有建出来--- 因为n<100,可以 ...
- swift语言点评三 - Basic Operators
1.Tuples are compared from left to right, one value at a time, until the comparison finds two values ...
- VB学习笔记（一）VB操作字符串
在vb中 dim a# 定义a变量为双精度型变量~ #是类型符 % 整型 & 长整型 !单精度 $ 字符型 VB中strconv 的作用 StrConv("要转换的字符串" ...
- axios使用方法
npm install axios 创建文件夹api/index.js import axios from 'axios'; let http = axios.create({ baseURL: '' ...
- java后台生成图片二维码
controller: /** * 获取登录的验证码 * @param request * @param response */ public void getLoginCode(HttpSessio ...