zoukankan      html  css  js  c++  java
  • 文字添加响应事件,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 { 100%; height:100%; display:none; position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75);}');
    loadCssCode('.popup-inner {max-700px; 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 {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>
  • 相关阅读:
    mac快捷键,pycharm快捷键
    Django进阶之session
    Python:如何将字符串作为变量名
    Ubuntu中创建用户
    redis在centos上的安装
    centos--网络配置问题,提示connect: Network is unreachable
    Python 3.x--paramiko模块详解
    Python 3.x--paramiko模块安装过程中的错误
    Python 3.x--Socket实现简单的ssh和文件下载功能
    Python 3.x--面向对象编程(二)静态方法、类方法、属性方法
  • 原文地址:https://www.cnblogs.com/rojas/p/6479318.html
Copyright © 2011-2022 走看看