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>
  • 相关阅读:
    转:如何判断软件功能特性的依赖
    原创:运行loadtest时报错the load test results repository was created with a previous version and is not compatible
    转:使用正则表达式进行高效的测试
    6.2.1 HTTP音频播放
    6.2 网络音频
    6.1.3 控制服务中的MediaPlayer
    android开源项目和框架
    6.1.2 加上MediaPlayer的本地服务
    6.1.1 服务
    6.1 后台音频播放
  • 原文地址:https://www.cnblogs.com/rojas/p/6479318.html
Copyright © 2011-2022 走看看