soapbox/test.html at master · hamberguesa/soapbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
  <title>TEST</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="jquery.paulund_modal_box.js"></script>

</head>
<body>

<a href="#" class="paulund_modal">Click Here</a>

  <script>
  (function($){
    $.fn.paulund_modal_box = function(prop){

      var options = $.extend({
        height : "250",
        width : "500",
        top: "20%",
        left: "30%",
      },prop);

      return this.click(function(e){
        add_block_page();
        add_popup_box();
        add_styles();

        $('.paulund_modal_box').fadeIn();
      });

       function add_styles(){
        $('.paulund_modal_box').css({
          'position':'absolute',
          'left':options.left,
          'top':options.top,
          'display':'none',
          'height': options.height + 'px',
          'width': options.width + 'px',
          'border':'1px solid #fff',
          'box-shadow': '0px 2px 7px #292929',
          '-moz-box-shadow': '0px 2px 7px #292929',
          '-webkit-box-shadow': '0px 2px 7px #292929',
          'border-radius':'10px',
          '-moz-border-radius':'10px',
          '-webkit-border-radius':'10px',
          'background': '#f2f2f2',
          'z-index':'50',
        });
        $('.paulund_modal_close').css({
          'position':'relative',
          'top':'-25px',
          'left':'20px',
          'float':'right',
          'display':'block',
          'height':'50px',
          'width':'50px',
          'background': 'url(images/close.png) no-repeat',
        });

        var pageHeight = $(document).height();
        var pageWidth = $(window).width();

        $('.paulund_block_page').css({
          'position':'absolute',
          'top':'0',
          'left':'0',
          'background-color':'rgba(0,0,0,0.6)',
          'height':pageHeight,
          'width':pageWidth,
          'z-index':'10'
        });
        $('.paulund_inner_modal_box').css({
          'background-color':'#fff',
          'height':(options.height - 50) + 'px',
          'width':(options.width - 50) + 'px',
          'padding':'10px',
          'margin':'15px',
          'border-radius':'10px',
          '-moz-border-radius':'10px',
          '-webkit-border-radius':'10px'
        });
      }

       function add_block_page(){
        var block_page = $('<div class="paulund_block_page"></div>');

        $(block_page).appendTo('body');
      }

       function add_popup_box(){
         var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><form id="create-splash-form" action="/splashes" method="post"><label for="Create-Splash">Splash!</label><br><input type="textarea" placeholder="hello" name="content" placeholder="255 Characters or Less"><input type="submit" id="create_splash"><br></form></div></div>');
         $(pop_up).appendTo('.paulund_block_page');

         $('.paulund_modal_close').click(function(){
          $(this).parent().fadeOut().remove();
          $('.paulund_block_page').fadeOut().remove();
         });
      }

      return this;
    };

  })(jQuery);

  </script>

  <script>
  $(document).ready(function(){
    $('.paulund_modal').paulund_modal_box();
  });
  </script>

</body>
</html>