自定義 confirm 确認框

ys_confirmation.css

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

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

<code>    </code><code>position</code><code>:</code><code>fixed</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>top</code><code>:</code><code>0</code><code>;</code>

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

<code>    </code><code>display</code><code>:</code><code>none</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>z-index</code><code>: </code><code>99999</code><code>;</code>

<code>}</code>

<code>.ys-confirmation .ys-confirmation-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>8px</code><code>;</code>

<code>    </code><code>padding-bottom</code><code>:</code><code>51px</code><code>;</code>

<code>    </code><code>box-sizing: border-box;</code>

<code>.ys-confirmation .ys-confirmation-content .ys-confirmation-message{</code>

<code>    </code><code>color</code><code>:</code><code>#222</code><code>;</code>

<code>    </code><code>line-height</code><code>: </code><code>20px</code><code>;</code>

<code>    </code><code>font-size</code><code>:</code><code>14px</code><code>;</code>

<code>    </code><code>text-align</code><code>: </code><code>center</code><code>;</code>

<code>    </code><code>padding</code><code>:</code><code>25px</code> <code>15px</code><code>;</code>

<code>.ys-confirmation .ys-confirmation-content .ys-confirmation-btn-group{</code>

<code>    </code><code>width</code><code>:</code><code>100%</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>51px</code><code>;</code>

<code>    </code><code>border-top</code><code>:</code><code>1px</code> <code>solid</code> <code>#e5e5e5</code><code>;</code>

<code>.ys-confirmation .ys-confirmation-content .ys-confirmation-btn-group a{</code>

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

<code>    </code><code>height</code><code>:</code><code>50px</code><code>;</code>

<code>    </code><code>line-height</code><code>: </code><code>50px</code><code>;</code>

<code>    </code><code>font-size</code><code>:</code><code>17px</code><code>;</code>

<code>    </code><code>color</code><code>:</code><code>#ff7920</code><code>;</code>

<code>.ys-confirmation .ys-confirmation-content .ys-confirmation-btn-group a.ys-confirmation-cancel-btn{</code>

<code>.ys-confirmation .ys-confirmation-content .ys-confirmation-btn-group a.ys-confirmation-ok-btn{</code>

<code>    </code><code>border-left</code><code>:</code><code>1px</code> <code>solid</code> <code>#e5e5e5</code><code>;</code>

<code>    </code><code>font-weight</code><code>: </code><code>bold</code><code>;</code>

ys_confirmation.js

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

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

<code>    </code><code>var</code> <code>container = </code><code>null</code><code>;</code>

<code>    </code><code>var</code> <code>currentCallback = </code><code>null</code><code>;</code>

<code>    </code><code>var</code> <code>html =  </code><code>"&lt;div class='ys-confirmation'&gt;                              "</code><code>+</code>

<code>                </code><code>"  &lt;div class='ys-confirmation-content'&gt;                   "</code><code>+</code>

<code>                </code><code>"     &lt;div class='ys-confirmation-message'&gt;&lt;/div&gt;"</code><code>+</code>

<code>                </code><code>"     &lt;div class='ys-confirmation-btn-group'&gt;             "</code><code>+</code>

<code>                </code><code>"        &lt;a class='ys-confirmation-cancel-btn'&gt;取消&lt;/a&gt;  "</code><code>+</code>

<code>                </code><code>"        &lt;a class='ys-confirmation-ok-btn'&gt;确定&lt;/a&gt;      "</code><code>+</code>

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

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

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

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

<code>        </code><code>container = $(html).appendTo(</code><code>"body"</code><code>);</code>

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

<code>    </code><code>function</code> <code>show(message,callback){</code>

<code>        </code><code>currentCallback = callback;</code>

<code>        </code><code>$(container).find(</code><code>".ys-confirmation-message"</code><code>).html(message);</code>

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

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

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

<code>        </code><code>$(container).find(</code><code>".ys-confirmation-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>$(container).css(</code><code>"visibility"</code><code>,</code><code>"initial"</code><code>);</code>

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

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

<code>        </code><code>currentCallback = </code><code>null</code><code>;</code>

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

<code>        </code><code>container.on(</code><code>"touchend"</code><code>,</code><code>".ys-confirmation-cancel-btn"</code><code>,</code><code>function</code><code>(e){</code>

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

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

<code>            </code><code>hide();</code>

<code>        </code><code>container.on(</code><code>"touchend"</code><code>,</code><code>".ys-confirmation-ok-btn"</code><code>,</code><code>function</code><code>(e){</code>

<code>            </code><code>currentCallback();</code>

<code>    </code><code>var</code> <code>initialized = </code><code>false</code><code>;</code>

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

<code>        </code><code>if</code><code>(initialized){</code>

<code>            </code><code>return</code><code>;</code>

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

<code>        </code><code>initialized = </code><code>true</code><code>;</code>

<code>        </code><code>render();</code>

<code>        </code><code>bindEvents();</code>

<code>    </code><code>function</code> <code>showConfirmation(message,callback){</code>

<code>        </code><code>init();</code>

<code>        </code><code>show(message,callback);</code>

<code>    </code><code>var</code> <code>ConfirmationWidget = {};</code>

<code>    </code><code>ConfirmationWidget.showConfirmation=showConfirmation;</code>

<code>    </code><code>window.ConfirmationWidget = ConfirmationWidget;</code>

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

component.html

<code>&lt;!DOCTYPE html&gt;</code>

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

<code>&lt;</code><code>head</code> <code>lang</code><code>=</code><code>"en"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"UTF-8"</code><code>&gt;</code>

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

<code>    </code><code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"viewport"</code> <code>content</code><code>=</code><code>"width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>href</code><code>=</code><code>"static/css/common/ys_confirmation.css"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"static/js/vendor/jquery-2.1.3.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"static/js/common/ys_confirmation.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

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

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

<code>    </code><code>&lt;</code><code>input</code> <code>id</code><code>=</code><code>"confirm-btn"</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"确認"</code><code>/&gt;</code>

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

<code>    </code><code>$("#confirm-btn").click(function(e){</code>

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

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

<code>        </code><code>ConfirmationWidget.showConfirmation("确認送出?",function(){</code>

<code>            </code><code>alert("送出");</code>

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

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

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

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

<a href="http://s4.51cto.com/wyfs02/M02/86/8F/wKiom1fD52-xoHpSAAXQ4GWV1aU462.jpg" target="_blank"></a>

版權聲明：原創作品，如需轉載，請注明出處。否則将追究法律責任

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