文字添加响应事件，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 文件 ...
随机推荐
- 模拟实现Spring IoC功能
为了加深理解Spring 今天自己写了一个模拟的Spring.... 步骤: 1.利用jdom解析bean.xml(pull,sax也能够,我这里用了jdom) 2.先解析全部的<bean/&g ...
- Mosquito的优化——epoll优化（七）
本文由逍遥子撰写,转发请标注原址: http://blog.csdn.net/houjixin/article/details/46413583 或 http://houjixin.blog.163. ...
- 【LeetCode-面试算法经典-Java实现】【058-Length of Last Word （最后一个单词的长度）】
[058-Length of Last Word (最后一个单词的长度)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a string s consis ...
- iOS CoreData介绍和使用（以及一些注意事项）
iOS CoreData介绍和使用(以及一些注意事项) 最近花了一点时间整理了一下CoreData,对于经常使用SQLite的我来说,用这个真的有点用不惯,个人觉得实在是没发现什么亮点,不喜勿喷啊.不 ...
- [JZOJ 5909] [NOIP2018模拟10.16] 跑商（paoshang） 解题报告 （圆方树）
题目链接: https://jzoj.net/senior/#contest/show/2529/2 题目: 题目背景:尊者神高达很穷,所以他需要跑商来赚钱题目描述:基三的地图可以看做 n 个城市,m ...
- Eclipse下载安装教程
Eclipse下载安装 Eclipse是一款开源软件,免费,实用,也应该是大多数同学接触的第一款java集成开发环境(IDE),简单介绍下下载流程 1.进入官网 百度,Bing,或谷歌搜索Eclips ...
- Linux下Python编译安装
1.安装python3 1.1下载python源码包 网址:https://www.python.org/downloads/release/python-362/ 下载地址:https://www. ...
- node，koa 图片批量添加水印，可手动配置水印位置
公司设计在处理京东上架商品图片的时候,需要给设计好的图片添加京东的“logo”,并且logo位置得根据图片来摆放,需要通过计算得出logo位置.那样太麻烦了,于是就用node,koa写了批量给图片添加 ...
- tabIndex-bootstrap中Get到的
网页键盘的无障碍访问性 其实加了这个,可以控制Tab键切换的顺序,聚焦等 这个属性,任何标签都可以添加,没有兼容性限制,属性值的范围:0-32767 当一个元素设置tabindex属性值为-1的时候, ...
- 使用Mapping实现的以太坊智能合约的代码
Step 1: 创建一个基础合约 pragma solidity ^0.4.7; contract Coin { address public minter; mapping (address =&g ...