文字添加响应事件，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>
