onsenui实现从下往上弹出效果的实现

      在做移动端H5的问题,我查找了所有的onsenui从下往上弹出框自动的控件，但都必须弹出框是另一个ons-page,

但这样对我的业务是一个弊端，必须在一个ons-page里实现才能达到我想要的效果，所以就着手借着onsen的样式写了一个。

忽略文章内容，从网上down下来的。

<ons-page>
    <style>
        .show-sheet{
            position: absolute;
            display: none;
            bottom: -300px;
            height: 300px;
            left: 0;
            right: 0;
            transition: bottom 0.5s;
            z-index: 200001;
            -webkit-font-smoothing:antialiased;
            cursor:default;
            background-color: white;
        }
        .content{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 999;
            height: 100%;
        }
        .action-sheet-mask{
            z-index: 20000; 
            opacity: 1; 
            transition: all 0.2s linear 0s;
        }
        
    </style>
    
<div  class="content" style="">
    <input onclick="show();" value="点击从下往上" type="button">
         生命里<br>一些缱绻<br>无论素净<br>还是喧哗<br>都已经被岁月赋予了清喜的味道<br>一些闲词<br>或清新<br>或淡雅<br>总会在某一个回眸的时刻醉了流年<br>濡湿了柔软的心<br>冥冥之中<br>我们沿着呼唤的风声<br>终于在堆满落花的秋里<br>再次重逢<br>念在天涯<br>心在咫尺<br>我相信<br>一米阳光<br>才是我们最好的距离。   
           缘起是诗<br>缘离是画<br>这些关于岁月<br>关于记忆的章节<br>终会被时光搁置在无法触及的红尘之外<br>曾经<br>你我一别经年<br>可风里<br>总有一段美丽会与我们不期而遇<br>一盏琉璃<br>半杯心悦<br>端然着那一份醉人的静<br>这安静行走的流年<br>总会被过往赋予一份清喜<br>一份浪漫。
           或许<br>习惯了着布衣素颜<br>让清心若雪<br>不喜张扬<br>不畏喧哗<br>守着一怀自己的素韵安静<br>在自己心中的半亩桃源<br>修篱种菊<br>喜欢与山水相依<br>与流水对话<br>让文字的墨香<br>依附在心灵的每一个角落<br>也喜欢<br>在闲时<br>端坐时光一隅<br>将一本书读到无字<br>将一盏茶喝到无味<br>将一个故事看到流泪.……心染尘香<br>不须有多少的柔情话语去讲<br>只要能够念起<br>便是一份温暖。
           再打开记忆的栅栏<br>取一壶往昔<br>与流年对坐<br>情有多深<br>心就有多疼<br>触不到的可惜<br>在挥手袖的风里滋养着忧伤<br>捻一缕清芬<br>看三千浮华<br>历历往事<br>素淡清雅<br>研一池墨香<br>植于眉心<br>相遇如梦<br>一直充满虔诚的无暇<br>这个十月<br>我用满怀的深情<br>打开文字的苍白<br>灵动的心事<br>穿过岁月的轩窗<br>迎面而来<br>我未曾离开<br>为何不见了原来这世间的繁华与葱笼？是时光的无情<br>还是流年容易沧桑<br>让所有的一切都如逝水匆匆<br>去了遥远的天涯？
            从此<br>我只想<br>淡泊一份宁静<br>让心中盈满诗意<br>只为赴你早就许下的盟誓<br>你不来<br>我怎么会轻易离开？一直<br>我喜欢叶落的静美<br>梦想着有一天和你一起看云水长天。我说：我韶华已老<br>岁月早已沧桑<br>已习惯了静默着独舞忧伤<br>然<br>这一眼凝眸<br>却注定得一世相随！或许我会静静陪你看一生的细水长流。
            静默<br>看一场烟花如何绚烂自己的一生<br>忽然发现<br>我的梦想<br>有些什么已悄然变了<br>呼出的想念里<br>夏已调谢<br>秋已深浓<br>空气里有雨过的清新<br>却让秋沾染了好些沧桑的凉。一场花开的邂逅<br>静美了多少无言的守望？一帘烟雨的轮回<br>成全了多少天涯的相依？梦里天涯<br>许多人<br>终要忘记；许多事<br>总会随风<br>那些忧伤和叹息的深夜<br>依然会被突如其来的喧嚣触痛<br>我的星月<br>我的花开<br>曾经悄然用心铭刻<br>却也被时光的沙漏<br>渐渐滤去最初的繁华。
           我知道<br>那些关怀<br>那些温暖<br>你均是悄悄的给予<br>既已懂得<br>何须多言？！就让这份静美<br>永留心间。感谢岁月赠予我的这一份恩宠<br>亦感谢你让我途径你生命的四季<br>陪我走过的这一程山水<br>那么美。遇见<br>已是很美。就让我借一程云淡风轻。掬一捧水月在手<br>沾岁月的花香满衣。慎重在相逢的渡口写下：回忆有你<br>真是精彩。未来很美<br>许我和你一起笑对！可好？其实<br>情早已经入心<br>不要问<br>情深缘浅；不要说<br>相见恨晚。遇见已是很美<br>我们何须追问那些雨的印记<br>那些相伴的理由？一直想对你说：如果时光不老<br>情不会改变<br>如果你愿<br>我便放下所有矜持<br>携一颗琉璃素心<br>陪你静看一生最美的日落烟霞。
</div>
<div  class="action-sheet-mask" style="display: none;" onclick="hide_sheet_mask()"></div>
<div class="show-sheet">
    <div style="text-align: right; 100%;border-bottom:#E3E3E3 1px solid;margin: 5px 5px 0px 0px;height:30px;">
        <ons-icon icon="ion-ios-close-outline" onclick="hide_sheet_mask()" style="color:#007AFF;" size="24px">&nbsp;</ons-icon>
    </div>
    <div style="overflow-y: auto;height: 260px;">
         与你相约<br>是一种清浅的禅意<br>而我<br>便在红尘最深处的禅意里<br>等你--题辞.微尘陌上
　　窗外<br>细雨的绵柔音律<br>偶尔听听<br>是清宁的<br>洒落在我的庭院<br>也肥了那株茶树的花枝。
　　想来<br>流年暗换<br>三月已不是那段枯瘦的光阴。旧年的那首《葬花吟》<br>只剩短歌余韵<br>如一阕殇词<br>清浅地沉落<br>忧伤而不失风雅。
　　与你相约<br>等待一场即将到来的花期<br>于我<br>是一个小小的欢喜<br>因为<br>我偶尔地想你<br>是一种忧伤的美丽！
    <div>
</div>
<script>
    function show(){
        document.getElementsByClassName("show-sheet")[0].style.display="block";
        setTimeout(function(){
           document.getElementsByClassName("show-sheet")[0].style.bottom="0px";
        },0)
        document.getElementsByClassName("action-sheet-mask")[0].style.display="block";
    }
    function hide_sheet_mask(){
        document.getElementsByClassName("show-sheet")[0].style.bottom="-300px";
        document.getElementsByClassName("action-sheet-mask")[0].style.display="none";
    }
</script>
</ons-page>