自定義popup彈出框

ys_popup.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<code>.ys-popup{</code>

<code>    </code><code>position</code><code>:</code><code>fixed</code><code>;</code>

<code>    </code><code>top</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>bottom</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>left</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>right</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>display</code><code>:</code><code>none</code><code>;</code>

<code>    </code><code>z-index</code><code>: </code><code>99999</code><code>;</code>

<code>    </code><code>background-color</code><code>: rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.4</code><code>);</code>

<code>}</code>

<code>.ys-popup .ys-popup-content{</code>

<code>    </code><code>position</code><code>:</code><code>absolute</code><code>;</code>

<code>    </code><code>left</code><code>:</code><code>30px</code><code>;</code>

<code>    </code><code>right</code><code>:</code><code>30px</code><code>;</code>

<code>    </code><code>top</code><code>:</code><code>50%</code><code>;</code>

<code>    </code><code>display</code><code>:</code><code>block</code><code>;</code>

<code>    </code><code>background-color</code><code>:</code><code>#fff</code><code>;</code>

<code>    </code><code>margin</code><code>:</code><code>auto</code><code>;</code>

<code>    </code><code>border-radius: </code><code>4px</code><code>;</code>

ys_popup.js

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<code>(</code><code>function</code><code>($){</code>

<code>    </code><code>function</code> <code>closePopup(target){</code>

<code>        </code><code>$(target).hide();</code>

<code>    </code><code>}</code>

<code>    </code><code>function</code> <code>showPopup(target){</code>

<code>        </code><code>$(target).show();</code>

<code>        </code><code>$(target).css(</code><code>"visibility"</code><code>,</code><code>"hidden"</code><code>);</code>

<code>        </code><code>var</code> <code>popupContentHeight = parseInt($(target).find(</code><code>".ys-popup-content"</code><code>).css(</code><code>"height"</code><code>));</code>

<code>        </code><code>$(target).find(</code><code>".ys-popup-content"</code><code>).css({</code>

<code>            </code><code>"margin-top"</code><code>:(-1)*popupContentHeight/2+</code><code>"px"</code>

<code>        </code><code>});</code>

<code>        </code><code>$(target).css(</code><code>"visibility"</code><code>,</code><code>"initial"</code><code>);</code>

<code>    </code><code>$(</code><code>"body"</code><code>).on(</code><code>"click"</code><code>,</code><code>".ys-popup"</code><code>,</code><code>function</code><code>(e){</code>

<code>        </code><code>e.stopPropagation();</code>

<code>        </code><code>e.preventDefault();</code>

<code>        </code><code>$(</code><code>this</code><code>).hide();</code>

<code>    </code><code>});</code>

<code>    </code><code>$(</code><code>"body"</code><code>).on(</code><code>"click"</code><code>,</code><code>".ys-popup .ys-popup-content"</code><code>,</code><code>function</code><code>(e){</code>

<code>    </code><code>var</code> <code>options = {</code>

<code>        </code><code>ysPopup:</code><code>function</code><code>(command) {</code>

<code>            </code><code>if</code><code>(command==</code><code>"show"</code><code>){</code>

<code>                </code><code>showPopup(</code><code>this</code><code>);</code>

<code>            </code><code>}</code><code>else</code> <code>if</code><code>(command==</code><code>"hide"</code><code>){</code>

<code>                </code><code>closePopup(</code><code>this</code><code>);</code>

<code>            </code><code>}</code><code>else</code><code>{</code>

<code>            </code><code>}</code>

<code>        </code><code>}</code>

<code>    </code><code>};</code>

<code>    </code><code>$.fn.extend(options);</code>

<code>})(jQuery);</code>

測試

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"ys-popup remark-popup"</code> <code>&gt;</code>

<code>        </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"ys-popup-content"</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"remark-popup-title"</code><code>&gt;備注&lt;/</code><code>div</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"remark-popup-content"</code><code>&gt;&lt;</code><code>textarea</code> <code>placeholder</code><code>=</code><code>"請輸入備注"</code><code>&gt;&lt;/</code><code>textarea</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"remark-popup-btn-group clearfix"</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>a</code> <code>class</code><code>=</code><code>"remark-popup-cancel"</code><code>&gt;取消&lt;/</code><code>a</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>a</code> <code>class</code><code>=</code><code>"remark-popup-ok"</code><code>&gt;确認&lt;/</code><code>a</code><code>&gt;</code>

<code>            </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code><code>&lt;!-- activity-success-popup --&gt;</code>

<code>    </code> 

<code>    </code><code>&lt;</code><code>script</code><code>&gt;</code>

<code>        </code><code>$(".ys-popup").ysPopup("show");// 顯示彈出框</code>

<code>        </code><code>$(".ys-popup").ysPopup("hide");// 隐藏彈出框</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

 本文轉自 antlove 51CTO部落格，原文連結:http://blog.51cto.com/antlove/1856855