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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.  
  9. <title>jquery实现点击链接弹出层效果</title>
  10.  
  11. <script src="http://code.jquery.com/jquery-latest.js"></script>
  12.  
  13. <script type="text/javascript">
  14.  
  15. function loadCssCode(code){
  16. var style = document.createElement('style');
  17.     style.type = 'text/css';
  18.     style.rel = 'stylesheet';
  19.     try{
  20.         //for Chrome Firefox Opera Safari
  21.         style .appendChild(document.createTextNode(code));
  22.     }catch(ex){
  23.         //for IE
  24.         style.styleSheet.cssText = code;
  25.     }
  26.     var head = document.getElementsByTagName('head')[0];
  27.     head.appendChild(style);
  28. }
  29.  
  30. $(document).ready(function(){
  31. loadCssCode('.popup { width:100%; height:100%; display:none; position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75);}');
  32. 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;}');
  33. 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;}');
  34. 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;}');
  35.  
  36.   helpContent();
  37.  
  38.   actionoftext();
  39.  
  40. });
  41.  
  42. function actionoftext(){
  43.     //----- OPEN
  44.     $('[data-popup-open]').on('click', function(e)  {
  45.         var targeted_popup_class = jQuery(this).attr('data-popup-open');
  46.         $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
  47.          e.preventDefault();
  48.     });
  49.  
  50.     //----- CLOSE
  51.     $('[data-popup-close]').on('click', function(e)  {
  52.         var targeted_popup_class = jQuery(this).attr('data-popup-close');
  53.         $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
  54.          e.preventDefault();
  55.     });
  56. }
  57.  
  58. function helpContent(){
  59.  
  60. var boarddiv = "<div class='popup' data-popup='popup-1'>"
  61. +"<div class='popup-inner'>"
  62. +"<h2>Wow! This is Awesome! (Popup #1)</h2>"
  63. +"<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>"
  64. +"<p><a data-popup-close='popup-1' href='#'>Close</a></p>"
  65. +"<a class='popup-close' data-popup-close='popup-1' href='#'>x</a>"
  66. +"</div>"
  67. +"</div>";    
  68.  
  69. $(document.body).append(boarddiv); 
  70.  
  71. }
  72.  
  73. </script>
  74.  
  75. </head>
  76.  
  77. <body>
  78.  
  79. <div style="background-color:yellow">
  80. <!--
  81.  <a class="btn" data-popup-open="popup-1" href="#">Open Popup #1</a>
  82.  <li data-popup-open="popup-1"><span id="target">testpopup</span></li>
  83. -->
  84. <div>
  85.     <div >
  86.         <li data-popup-open="popup-1"><span id="target">testpopup</span></li>
  87.     </div>
  88. </div>
  89.  
  90. </body>
  91.  
  92. </html>

文字添加响应事件，js动态加载CSS, js弹出DIV的更多相关文章

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

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

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

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

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

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

  4. js动态加载css和js

    之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjs ...

  5. 动态加载css,js

    function dynamicLoadCss(url) { var head = document.getElementsByTagName('head')[0]; var link = docum ...

  6. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

  7. 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

    今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...

  8. js动态加载以及确定加载完成的代码

    利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...

  9. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

随机推荐

  1. Hive编程指南_学习笔记01

    第四章: HQl的数据定义 1:创建数据库   create database financials;   create database  if not exists financials; 2: ...

  2. m_Orchestrate learning system---十五、如何快速查错

    m_Orchestrate learning system---十五.如何快速查错 一.总结 一句话总结: a.删除代码法 b.添加提示代码法 c.仔细看错误信息 1.评论板块和论坛板块的实时更新? ...

  3. nyoj--914--Yougth的最大化（二分查找）

    Yougth的最大化 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 Yougth现在有n个物品的重量和价值分别是Wi和Vi,你能帮他从中选出k个物品使得单位重量的价值最 ...

  4. 机器学习(十一) 支持向量机 SVM（上）

    一.什么是支撑向量机SVM (Support Vector Machine) SVM(Support Vector Machine)指的是支持向量机,是常见的一种判别方法.在机器学习领域,是一个有监督 ...

  5. Ubuntu系统下Import cv2提示no modules ...错误

    最近利用pycharm在Ubuntu系统下调试一个Python项目,将pycharm的解释器从python2.7更换到python3.4后,程序中的Import cv2提示no modules nam ...

  6. c#学习0216

    2017-03-02 out  关键字指定所给的参数为一个输出参数 该参数的值将返回给函数调用中使用的变量 注意事项 1未赋值的变量用作ref参数是非法的,但是可以把未赋值的变量用作out参数 2 在 ...

  7. 移动端font-size适配

    html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} ...

  8. vue项目input的placeholder根据用户的选择改变

    html部分 <el-input :placeholder="holder" v-model="searchKey"> <el-select ...

  9. ztree连接数据库，实现下拉菜单

    $(document).ready(function(){ var treeObj = $("#treeDemo"); $.fn.zTree.init(treeObj, setti ...

  10. NOIp2018模拟赛四十二

    今天看标题终于回到了“NOIP模拟赛”,十分高兴啊! 然后一打开题目: ********** 所以今天又是一场NOIPlus模拟赛(微笑) 成绩:0+70+0=70 A题想了个贪心被myh两分钟cha ...