手机页面创建自定义弹出窗

html:

<div class="pop_up_window">
<div id="popshadow"></div>
<div id="pop_add">
<div class="add_div">
<ul>
<li>
<input class="input_tag"  placeholder="请输入您要添加的标签" name="" id="" value="" type="text">
</li>
<li class="li2">
<input  class="input_cancel" name="" id="input_cancel" value="取消" type="button">
<input  class="input_confirm" name="" id="" value="确定" type="button">
</li>
</ul>
</div>
</div>
</div>

css:

#popshadow {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #000 none repeat scroll 0% 0%;
    opacity: 0.5;
}
#pop_add {
display: none;
    border-radius: 3px;
position: absolute;
top: 110px;
margin-right: 10%;
vertical-align: middle;
margin-left: 10%;
width: 80%;
height: 160px;
background: #FFF none repeat scroll 0% 0%;
z-index: 9999999;
}
.add_div {
margin: 30px;
}
.add_div .input_tag {
    padding: 12px 0px;
    color: #A0A0A0;
   border: none;
    background-color: #FFF;
    width:100%;
    border-radius: 4px;
    box-shadow: none;
    font-size: 14px;
    vertical-align: middle;
}
.add_div .li2 {
text-align: right;
margin-top: 20px;
}
.add_div .input_cancel {
height: 30px;
line-height: 30px;
width: 60px;
text-align: center;
vertical-align: middle;
color: #FFFFFF;
border-radius: 4px;
border: none;
background-color: #f1f1f1;
margin-right: 10px;
}
.add_div .input_confirm {
height: 30px;
line-height: 30px;
width: 60px;
text-align: center;
vertical-align: middle;
color: #FFFFFF;
border-radius: 4px;
border: none;
background-color: #50baa3;
}

js:

$(function() {
  //创建我自己的标签js
  $("#create_owntag").click(function(){
  $("#popshadow").show();
  $("#pop_add").show();
  //移动设备禁止页面滚动-start
  $('html,body').animate({scrollTop: '0px'}, 100);//让页面滚动到最顶端--jquery

document.getElementsByTagName('body')[0].scrollTop = 0;//让页面滚动到最顶端--不使用jquery
window.ontouchmove=function(e){
       e.preventDefault && e.preventDefault();
       e.returnValue=false;
       e.stopPropagation && e.stopPropagation();
       return false;
}
document.body.style.overflowX=document.body.style.overflowY="hidden";
//移动设备禁止页面滚动-end    
  });
  $("#input_cancel").click(function(){
  $("#popshadow").hide();
  $("#pop_add").hide();
  //移动设备解除禁止页面滚动-start
window.ontouchmove=function(e){
       e.preventDefault && e.preventDefault();
       e.returnValue=true;
       e.stopPropagation && e.stopPropagation();
       return true;
}
  document.body.style.overflowX=document.body.style.overflowY="auto";
  //移动设备解除禁止页面滚动-end    
  });
});