Post
Ask Question

How to Create a Popup in SharePoint within a Content Editor

  1. <html  
  2.     xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <title>jQuery Popup Dialog - Click</title>  
  5.         <style type="text/css">  
  6.             #overlay   
  7.             {  
  8.                ;  
  9.                top: 0;  
  10.                left: 0;  
  11.                width: 100%;  
  12.                height: 100%;  
  13.                background-color: #000;  
  14.                filter:alpha(opacity=70);  
  15.                -moz-opacity:0.7;  
  16.                -khtml-opacity: 0.7;  
  17.                opacity: 0.7;  
  18.                z-index: 100;  
  19.                display: none;  
  20.             }  
  21.             .content a  
  22.             {  
  23.                text-decoration: none;  
  24.             }  
  25.             .popup  
  26.             {  
  27.                width: 100%;  
  28.                margin: 0 auto;  
  29.                display: none;  
  30.                ;  
  31.                z-index: 101;  
  32.             }  
  33.             .content  
  34.             {  
  35.                min-width: 600px;  
  36.                width: 600px;  
  37.                min-height: 150px;  
  38.                margin: 100px auto;  
  39.                background: #f3f3f3;  
  40.                ;  
  41.                z-index: 103;  
  42.                padding: 10px;  
  43.                border-radius: 5px;  
  44.                box-shadow: 0 2px 5px #000;  
  45.             }  
  46.             .content p  
  47.             {  
  48.                clear: both;  
  49.                color: #555555;  
  50.                text-align: justify;  
  51.             }  
  52.             .content p a  
  53.             {  
  54.                color: #d91900;  
  55.                font-weight: bold;  
  56.             }  
  57.             .content .x  
  58.             {  
  59.                float: right;  
  60.                height: 35px;  
  61.                left: 22px;  
  62.                ;  
  63.                top: -25px;  
  64.                width: 34px;  
  65.             }  
  66.             .content .x:hover  
  67.             {  
  68.                cursor: pointer;  
  69.             }  
  70.          </style>  
  71.         <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>  
  72.         <script type='text/javascript'>  
  73.             $(function()
  74.             {  
  75.                var overlay = $('  
  76.                <div id="overlay"></div>');  
  77.                $('.close').click(function()  
  78.                {  
  79.                   $('.popup').hide();  
  80.                   overlay.appendTo(document.body).remove();  
  81.                   return false;  
  82.                });  
  83.                $('.x').click(function()  
  84.                {  
  85.                   $('.popup').hide();  
  86.                   overlay.appendTo(document.body).remove();  
  87.                   return false;  
  88.             });  
  89.             $('.click').click(function()  
  90.             {  
  91.                overlay.show();  
  92.                overlay.appendTo(document.body);  
  93.                $('.popup').show();  
  94.                return false;  
  95.             });  
  96.          });  
  97.   
  98.         </script>  
  99.  </head>  
  100.     <body>  
  101.         <div class='popup'>  
  102.             <div class='content'>  
  103.                 <img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' />  
  104.                 <p>  
  105. Here is the popup you wanted !!!!  
  106.   
  107.                     <br/>  
  108.                     <br/>  
  109.                     <a href='' class='close'>Close</a>  
  110.                 </p>  
  111.             </div>  
  112.         </div>  
  113.         <div id='container'>  
  114.             <a href='' class='click'>  
  115.                 <h2>  
  116.                     <b>Click Here to See Popup! </b>  
  117.                 </h2>  
  118.             </a>  
  119.             <br/>  
  120.         </div>  
  121.     </body>  
  122. </html>