深秋钓鱼技巧,天津警备区,开荒记
我要评论 1 <!doctype html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <title>事件冒泡-提示框</title>
7 </head>
8 <style>
9 button {
10 width: 160px;
11 height: 30px;
12 background-color: #ff0000;
13 color: #fff;
14 border: 1px solid #000;
15 }
16 #prompt{
17 display: none;
18 border: 1px solid #000;
19 padding: 20px;
20 position: fixed;
21 left: 50%;
22 top: 50%;
23 transform: translate(-50%,-50%);
24 max-width: 600px;
25 min-width: 300px;
26 border-radius: 6px;
27 background-color: #fff;
28 }
29
30 #prompt #prompt-content h3{
31 display: flex;
32 justify-content: space-between;
33 align-items: center;
34 margin: 0;
35 }
36 #prompt #prompt-content h3 i{
37 display: inline-block;
38 width: 26px;
39 height: 26px;
40 background-image: url('data:image/png;base64,ivborw0kggoaaaansuheugaaacaaaaagcayaaabzenr0aaadqkleqvryr7wxwahpurtgf9cczxpauu4dkqdfxhkrmskz0m0yqsidojwyiykpcunmzjw9ecfdyiwiu1geqskcmvzd63ace599dveul3//vdze33f2xtmu4kfub/ybx4clwcdbl6+fbsbp4gsb0mkagxraa2a8ckic0jsdk4c+wbsgwas0mnsbth2ydlwpayi1gcxavkci+xsifiqazakwgqisahscdapo/gejrsbmofhmx11gmhaziibdb2a/0cab9g1ydcwavuqguhnybyxj7fklzaa+aj1oqp/raueavg6gk8ba4fegeouwv01itt+bscc6+p4kaemqatuaaq6g1/zfb1jidlgtrboz+qymsez7y6ulqgswcjjnavoozhhofevfsuctytugp3ds5sungozhaswoq5juvqwvjlz+rhhuauqzojy/5tuxeahtg2vrxmhhzlddyrzgueiv0j6amskrwqho81bgg1dj4ekvuduxfghobshmuiuratnrpapcr4xe5/gq0nnupot/vxqgngyxdpgrelgkt/dli6a8jxdtus4r0l1yevaalhazljkxggqe0klv0ycqzgo2qqbbyunafeiq0d3ofvrudvjbyuqgsoh3chr8bbaqmb+yz0igdxywzycczyxtrmt6ewqhsmdaz9ljbquu6nqxgayofmvbb2tmthihauofkrfj0ejwryovkdt1lahxbhtteq+0bw67gkqrgalsdfsbo0b7x6tu0tkkqgposzf4mtt5cpgkznogtcpmuars8lz4duvfd3g9i0br4dyg4iuljrut6dkce5f1dpendmptcnqfbgdrhby31ec6mprwgijsx9vyyzvrwnypon4c1yftdlfjvcebpdvamajb1txc9ezq2p6le1cvo+gbewfvb91/hvflkhy8ta+9rxnqj99rbcufomdswjfx5fsnqtbskntaoxnj+wipkrql8v1fru8+vqfqerxmf4gwwgfh4kmanaunvbmyjbx5mw6q94wezivreirpusmtgc60h0ugjkdjjasfmnxr7fqmkwt2av2aa4dqgsbeshankyohfshniqxgsql6r7rzzk9nzuvzyhpgi6cb9zf8aabklp4kaj9vaaaaaelftksuqmcc');
41 background-position: center center;
42 background-repeat: no-repeat;
43 -webkit-background-size: cover;
44 background-size: cover;
45 }
46
47 #prompt #prompt-content p{
48 text-align: justify;
49 font-size: 16px;
50 }
51 </style>
52
53 <body>
54 <button onclick="promptbox('prompt')">显示/隐藏 消息框</button>
55 <div id="prompt">
56 <div id="prompt-content">
57 <h3>我是标题<i onclick="$('#prompt').hide()"></i></h3>
58 <hr>
59 <p>用一辈子时间去珍藏你，我不知道够不够？当我用坦荡、虔诚、真情，甚至，袒露心怀来“奋笔疾书”这样一份真爱的时候，我知道你的爱或恨已经植入我的骨髓，并刻在了心上。当真心遇到仁心的时候，我相信才会有心心相印一说。而面对一个人华丽转身的时候，所谓的真心和仁心再次相碰，溅出的那段激烈的火花，还会不会重新燃起一份爱的承诺？而我一直想用时间的长度和宽度来验证，把一个人藏在心底到底能藏多久？</p>
60 </div>
61 </div>
62 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
63 <script>
64 /**
65 * [promptbox 需要点击执行显示隐藏的按钮和需要显示的内容添加停止点击冒泡事件，为document添加点击隐藏事件]
66 * @param {[string]} boxid [显示/隐藏的消息提示框]
67 */
68 function promptbox(boxid) {
69
70 // 获取id
71 var boxid = $("#" + boxid);
72
73 // 显示/隐藏
74 $(boxid).toggle();
75
76 // 停止点击冒泡事件
77 var e = arguments.callee.caller.arguments[0] || event;
78
79 if (e && e.stoppropagation) {
80
81 e.stoppropagation();
82
83 } else {
84
85 window.event.cancelbubble = true;
86
87 }
88
89 // 显示/隐藏消息提示框
90 $(boxid).click(function(event) {
91
92 // 停止点击冒泡事件
93 var e = arguments.callee.caller.arguments[0] || event;
94
95 if (e && e.stoppropagation) {
96
97 e.stoppropagation();
98
99 } else {
100
101 window.event.cancelbubble = true;
102
103 }
104
105 })
106
107 // document点击隐藏事件，不需要清除冒泡事件
108 $(document).click(function() {
109
110 $(boxid).hide();
111
112 })
113
114 }
115 </script>
116 </body>
117
118 </html>
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）
html5 移动端视频video的android兼容(去除播放控件、全屏)
网友评论