css 加载js文字,文字添加响应事件，js动态加载CSS, js弹出DIV

最新推荐文章于 2023-07-10 16:44:27 发布

spRachel雷切爾

最新推荐文章于 2023-07-10 16:44:27 发布

阅读量217

点赞数

文章标签： css 加载js文字

文字添加响应事件，js动态加载CSS, js弹出DIV

jquery实现点击链接弹出层效果

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 = "

$(document.body).append(boarddiv);

}

testpopup

js实用方法记录-js动态加载css、js脚本文件

js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs('http://www.yi ...

JavaScript：用JS实现加载页面前弹出模态框

用JS实现加载页面前弹出模态框主要的JavaScript 代码是: //加载模态框 $('#myModal').modal(); $(document).ready(f ...

js动态加载css文件和js文件的方法

今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"]

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动态加载页面&period;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 文件 ...

随机推荐

VC中GBK与UTF8转化

void ConvertGBKToUtf8(CString& strGBK) { int len=MultiByteToWideChar(CP_ACP, 0, (LPCTSTR)strG ...

对ES6的yield示例分析

近期ES6标准如火如荼的发展,其中主要还是各大浏览器的支持,最重要厂商支付宝,微信的支持,使得国内的发展也很迅猛. 这里主要是对yield关键字的,yield实际上可以看作是一种新的中断机制,大家都知 ...

【003：使用SW4STM32不进入中断的原因】

系统环境: ubuntu 16.04 64bit开发环境:SW4STM32记录时间: 2017年07月01日联系方式: yexiaopeng1992@126.com背景: 在ubuntu下使用ST官方 ...

菜鸟系列docker——docker镜像上(3)

1. 镜像image 镜像和容器的关系就和安装包和程序的关系一样,有了镜像才可以启动容器,容器是镜像的一个运行实例. 1.1 镜像的结构通过第二节仓库,可能很多看官已经查看到镜像是分层的,接下来将对 ...

前端 -----js 定时器

定时器在js中的定时器分两种:1.setTimeout() 2.setInterval() 1.setTimeOut() 只在指定时间后执行一次 /定时器异步运行 function hello ...

JVM垃圾回收算法解析

JVM垃圾回收算法解析标记-清除算法该算法为最基础的算法.它分为标记和清除两个阶段,首先标记出需要回收的对象,在标记结束后,统一回收.该算法存在两个问题:一是效率问题,标记和清除过程效率都不太高, ...

React从0到1

本篇将一直更新下去,写的多了,可能会拆成小章节,记录完整的学习笔记 github https://github.com/ae6623/ReactL

MD5骨骼动画模型加载(一)

前面我们分析了静态模型OBJ格式,桢动画模型MD2,这篇主要分析骨骼动画MD5的一些概念并且实现. 混合桢动画有计算简单,容易实现等优点,但是在需要比较细致的效果时,则需要更多的关键桢,每桢都添加相同 ...

java 中一些需要注意的知识点

java数组的length属性是容量,而不是数组真实元素的个数: 多线程中的interrupt()方法并不会终止处于"运行状态"的线程,它只是将线程的中断标记设为true. juc ...

spRachel雷切爾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 加载js文字,文字添加响应事件，js动态加载CSS, js弹出DIV

文字添加响应事件，js动态加载CSS, js弹出DIVjquery实现点击链接弹出层效果function loadCssCode(code){var style = document.createElement('style');style.type = 'text/css';style.rel = 'stylesheet';try{//for Chrome Firefox Opera Safar...
复制链接

扫一扫