文字添加响应事件，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 文件 ...
随机推荐
- MongoDB数据修改案例
数据更新操作 队友MongoDB而言,数据更新是一件非常麻烦的事情.Mongo通常会存副本数据,数据有变更的时候,最好的做法是删除MongoDB的数据,重新插入. Mongo中提供了两个函数,一个是s ...
- HOOK劫持自己
#include <stdio.h> #include <stdlib.h> #include <Windows.h> #include "detours ...
- Spark Streaming 总结
这篇文章记录我使用 Spark Streaming 进行 ETL 处理的总结,主要包含如何编程,以及遇到的问题. 环境 我在公司使用的环境如下: Spark: 2.2.0 Kakfa: 0.10.1 ...
- CSS3的常用属性（一）
选择器 属性选择器(通过标签属性来选择) E[attr]: 表示只要元素<E>存在属性attr就能被选中 如: div[class] E[attr=val]: 表示元素<E> ...
- IEEE的论文需要注意的一些
详细看最近的IEEE会议模板的时候,忽然注意到表的注序号应该用字母:另外,引用未发表的论文,如果是archive上的要使用archive规定的方法,或者标注``unpublished''
- Python3.x和Python2.x的区别（转存参考）
http://www.360doc.com/content/14/0619/23/16740871_388198818.shtml 这个星期开始学习Python了,因为看的书都是基于Python2.x ...
- vue如何给它的data值赋值
activeDisplay的值如何改变 用$set();方法 vm.$set('b', 2) 或者 Vue.set(data, 'c', 3) this.someObject = Object.ass ...
- 3ds Max制作客厅场景实例教程
附件系列 (图01) 让我们回顾一下场景:一个房间包括下列一件件家具, 在中间的一张小桌子,在房间的角落的一个小桌子,有一个垃圾桶和一个带镜子的边桌,有一个烛台.还有一个挂钟,窗帘,沙发和带手臂的椅子 ...
- JDOJ 2785: 商之和 数论分块
Code: #include <iostream> #include <cstdio> #define setIO(s) freopen(s".in",&q ...
- 2017-2-10 bash基础脚本
练习:写一脚本,实现如下功能: 1.让用户通过键盘输入一个用户名,如果用户不存在就退出: 2.如果其UID等于其GID,就说它是个"good guy" 3.否则,就说它是个“bad ...