文字添加响应事件，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 文件 ...
随机推荐
- doT.js实现混合布局，判断，数组，函数使用，取模，数组嵌套
doT.js实现混合布局 数据结构 { "status": "1", "msg": "获取成功", "info ...
- [雅礼NOIP2018集训 day4]
感觉状态极差啊,今天居然爆零了 主要是以下原因: 1.又是T1看错题肝了两个小时,发现题意理解错误瞬间心态爆炸 2.T2交错了文件名 3.T3暴力子任务和正解(假的)混在一起,输出了两个答案 都想为自 ...
- 如何将MVC AREA中的某一个页设为起始页
public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.Ignore ...
- JavaScript学习——BOM对象
1.BOM 对象:浏览器对象模型(操作与浏览器相关的内容) 2.Window 对象 Window 对象表示浏览器中打开的窗口 setInterval():它有一个返回值,主要是提供给 clearInt ...
- HTML&CSS——网站注册页面
1.表单标签 所有需要提交到服务器端的表单项必须使用<form></form>括起来! form 标签属性: action,整个表单提交的位置(可以是一个页面,也可以是一个后 ...
- 线程状态与tcb、线程的生命周期
struct tcb { u32_t status; struct reg_context thread_context; void *stack; struct thread_info thread ...
- 利用fabric批量安装kvm虚拟机及其xp
公司一批PC机需要安装多个虚拟机跑任务,搞来搞去决定用centos7安装KVM来跑.于是先折腾了一下午,利用早先搭建好的cobbler给PC机安装OS.然后fabric批量部署. 环境:centos7 ...
- （四）React高级内容
1. React developertools安装及使用 2. PropTypes与DefaultProps 讲一下PropTypes, 先拿TodoItem来说: 从几种类型中选: 3 props ...
- CodeForces-722C Destroying Array 并查集 离线操作
题目链接:https://cn.vjudge.net/problem/CodeForces-722C 题意 给个数组,每次删除一个元素,删除的元素作为一个隔断,问每次删除后该元素左右两边最大连续和 思 ...
- 搭建rsync实时同步
1.本实验基于centos6.5服务器做的 cat cat /etc/redhat-release 2.在配置环境之前需要先将服务器自带的rsync卸除 yum -y remove rsync* 3. ...