html部分

 1 <div class="cm-td-report">
 2     <div class="cm-td-report-top">
 3         <h3>举报</h3>
 4         <img src="../static/img/cm-report-delete.png" />
 5     </div>
 6     <form action="" method="get">
 7         <p>
 8             举报对象: <span id="td_report_object"></span>
 9         </p>
10         <p>
11             举报原因: <input name="td_advertise" type="radio" id="td_advertise" class="td-report-radio" checked="checked" /><label for="td_advertise" class="td-cause-label"><span class="simulate-radio1"><span class="simulate-radio2 radio-active"></span></span>广告</label>
12             <input name="td_diss" type="radio" id="td_diss" class="td-report-radio" /><label for="td_diss" class="td-cause-label"><span class="simulate-radio1"><span class="simulate-radio2"></span></span>漫骂</label>
13             <input name="td_illegal" type="radio" id="td_illegal" class="td-report-radio" /><label for="td_illegal" class="td-cause-label"><span class="simulate-radio1"><span class="simulate-radio2"></span></span>违法</label>
14             <input name="td_erotic" type="radio" id="td_erotic" class="td-report-radio" /><label for="td_erotic" class="td-cause-label"><span class="simulate-radio1"><span class="simulate-radio2"></span></span>色情</label>
15             <input name="td_other" type="radio" id="td_other" class="td-report-radio" /><label for="td_other" class="td-cause-label"><span class="simulate-radio1"><span class="simulate-radio2"></span></span>其他</label>
16         </p>
17         <p>
18             <label for="td_report_content" class="report-content-label">举报内容: </label>
19             <textarea name="" id="td_report_content"></textarea>
20         </p>
21         <div>
22             <input type="submit" class="td-report-button" value="确定" />
23             <input type="button" class="td-report-button" value="取消" />
24         </div>
25     </form>
26 </div>

css部分

  1 .cm-td-report {
  2     width: 540px;
  3     height: 380px;
  4     border-radius: 5px;
  5     background: #f7f7f7;
  6     position: fixed;
  7     left: 50%;
  8     top: 50%;
  9     margin-left: -270px;
 10     margin-top: -190px;
 11     z-index: 2;
 12     overflow: hidden;
 13     display: block;
 14 }
 15 
 16 .cm-td-report-drag {
 17     margin: 0 !important;
 18 }
 19 
 20 .cm-td-report-top {
 21     width: 100%;
 22     height: 55px;
 23     background: #3982de;
 24     position: relative;
 25     padding-left: 20px;
 26     padding-top: 15px;
 27     margin-bottom: 20px;
 28 }
 29 
 30 .cm-td-report-top h3 {
 31     letter-spacing: 5px;
 32     font-size: 18px;
 33     color: #fff;
 34 }
 35 
 36 .cm-td-report-top img {
 37     position: absolute;
 38     right: 16px;
 39     top: 18px;
 40     cursor: pointer;
 41 }
 42 
 43 .cm-td-report p {
 44     margin-left: 20px;
 45     height: 50px;
 46 }
 47 
 48 #td_report_content {
 49     display: inline-block;
 50     margin-left: 10px;
 51     width: 420px;
 52     height: 100px;
 53 }
 54 
 55 .report-content-label {
 56     position: relative;
 57     top: -90px;
 58 }
 59 
 60 .td-report-radio, #td_report_object {
 61     margin-left: 10px;
 62 }
 63 
 64 .td-cause-label {
 65     position: relative;
 66     left: 5px;
 67     top: -2px;
 68 }
 69 
 70 .td-report-button {
 71     width: 80px;
 72     height: 30px;
 73     background: #3982de;
 74     border-radius: 3px;
 75     color: #fff;
 76     cursor: pointer;
 77 }
 78 
 79 .td-report-button:first-child {
 80     position: absolute;
 81     right: 120px;
 82     bottom: 65px;
 83 }
 84 
 85 .td-report-button:last-child {
 86     position: absolute;
 87     right: 30px;
 88     bottom: 65px;
 89 }
 90 
 91 .td-report-radio {
 92     opacity: 0;
 93 }
 94 
 95 .simulate-radio1 {
 96     width: 15px;
 97     height: 15px;
 98     border-radius: 15px;
 99     border: 1px solid #999;
100     position: absolute;
101     left: -18px;
102     top: 2px;
103 }
104 
105 .simulate-radio2 {
106     width: 9px;
107     height: 9px;
108     border-radius: 9px;
109     position: absolute;
110     left: 2px;
111     top: 2px;
112 }
113 
114 .radio-active {
115     background: #3982de;
116 }
117 
118 .report-button-active {
119     background: #3d8ff5;
120 }

基础css部分

 1 html, body, ul, li, p, h1, h2, h3, h4, h5, h6, img, div {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 * {
 7     box-sizing: border-box;
 8 }
 9 
10 body {
11     font-family: "Microsoft YaHei", "微软雅黑";
12 }
13 
14 /*fieldset组合表单中的相关元素*/
15 fieldset, img, input, button, textarea {
16     border: none;
17     padding: 0;
18     margin: 0;
19     outline-style: none;
20 }
21 
22 /*清除列表风格*/
23 ul, ol {
24     list-style: none;
25 }
26 
27 input {
28     padding-top: 0;
29     padding-bottom: 0;
30 }
31 
32 select, input, textarea {
33     font-size: 13px;
34     margin: 0;
35 }
36 
37 /*防止多行文本框拖动*/
38 textarea {
39     resize: none;
40 }
41 
42 img {
43     border: 0;
44     vertical-align: middle;
45 }
46 
47 body {
48     font-size: 13px;
49     background: #fff;
50 }
51 
52 /*清除浮动*/
53 .clearfix:before, .clearfix:after {
54     content: "";
55     display: table;
56 }
57 
58 .clearfix:after {
59     clear: both;
60 }
61 
62 .clearfix {
63     *zoom: 1; /*IE/7/6*/
64 }
65 
66 a {
67     text-decoration: none;
68 }
69 
70 a:hover {
71     color: #fc2300;
72 }
73 
74 h1, h2, h3, h4, h5, h6 {
75     text-decoration: none;
76     font-weight: normal;
77     font-size: 100%;
78 }
79 
80 s, i, em {
81     font-style: normal;
82     text-decoration: none;
83 }
84 
85 legend, select, input {
86     outline: none;
87 }

js部分

 1 //点击回复中举报弹出窗口控制开始 同时从页面上动态获取被举报者姓名 以及其他
 2 $(function(){
 3     /*主要展示举报弹出窗口本身 该功能注释 直接显示举报窗口
 4     $('.cm-td-report-link').click(function(){
 5         $('.cm-td-report').show();
 6         var td_report_obj = $(this).parent('.cm-td-reply-info').siblings('.cm-td-answerer').text();
 7         $('#td_report_object').text(td_report_obj);
 8     });
 9     */
10     $('.cm-td-report-top img').click(function(){
11         $('.cm-td-report').hide();
12     });
13     $('.td-report-button').click(function(){
14         $('.cm-td-report').hide();
15     });
16     $('.td-report-button').hover(function(){
17         $(this).addClass('report-button-active');
18     },function(){
19         $(this).removeClass('report-button-active');
20     });
21     //这里可以直接在css中用hover解决
22     $('.cm-text-submit').hover(function(){
23         $(this).addClass('report-button-active');
24     },function(){
25         $(this).removeClass('report-button-active');
26     });
27     $('.comment-submit').hover(function(){
28         $(this).addClass('report-button-active');
29     },function(){
30         $(this).removeClass('report-button-active');
31     });
32 });
33 //点击回复中举报弹出窗口控制结束
34 
35 //举报弹出窗口拖动效果开始
36 $(function(){
37     var $div = $(".cm-td-report-top");
38     /* 绑定鼠标左键按住事件 */
39     $div.bind("mousedown",function(event){
40         /* 获取需要拖动节点的坐标 */
41         var offset_x = $(".cm-td-report")[0].offsetLeft;//x坐标
42         var offset_y = $(".cm-td-report")[0].offsetTop;//y坐标
43         var client_x = $(window).width();
44         var client_y = $(window).height();
45         /* 获取当前鼠标的坐标 */
46         var mouse_x = event.pageX;
47         var mouse_y = event.pageY;
48         /* 绑定拖动事件 */
49         /* 由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素 */
50         $(document).bind("mousemove",function(ev){
51             //清除自带的margin，使其保持位置
52             $(".cm-td-report").addClass('cm-td-report-drag');
53             /* 计算鼠标移动了的位置 */
54             var _x = ev.pageX - mouse_x;
55             var _y = ev.pageY - mouse_y;
56             /* 设置移动后的元素坐标 */
57             //var now_x = (offset_x + _x ) + "px";
58             var now_x = offset_x + _x;
59             //var now_y = (offset_y + _y ) + "px";
60             var now_y = offset_y + _y;
61             var percent_x = (now_x / client_x) * 100;
62             var percent_y = (now_y / client_y) * 100;
63             /* 改变目标元素的位置 */
64             $(".cm-td-report").css({
65                 //top:now_y,
66                 //left:now_x
67                 top: percent_y + '%',
68                 left: percent_x + '%'
69             });
70         });
71     });
72     /* 当鼠标左键松开，解除事件绑定 */
73     $(document).bind("mouseup",function(){
74         $(this).unbind("mousemove");
75     });
76 });
77 //举报弹出窗口拖动效果结束
78 
79 //模拟单选按钮选中控制开始
80 $(function(){
81     $('.td-report-radio').click(function(){
82         var radio_id = $(this).attr('id');
83         $(this).next('.td-cause-label').children('.simulate-radio1').children('.simulate-radio2').addClass('radio-active');
84         //console.log($('label:not([for *= radio_id])').children('.simulate-radio1').children('.simulate-radio2').removeClass('radio-active'));
85         $('.td-cause-label').each(function(){
86             if($(this).attr('for') != radio_id){
87                 $(this).children('.simulate-radio1').children('.simulate-radio2').removeClass('radio-active');
88             }
89         })
90     })
91 });
92 //模拟单选按钮选中控制结束

在线演示

http://jsrun.net/CFYKp/edit