手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> 手机 >> 手机端使用提示样式

手机端使用提示样式

21660 手机 | 2015-5-5

由于本人美工不太好,所以每次做东西时,样式就是让我头疼到死的问题。所以有一些好的样式,我总是搜集起来。这次摘取了工程中用于手机端的一个样式,很简单,但是也实用。

最后的效果如下:

 

手机端提示样式

 

另外提示各位,做手机端展示的测试,最好用Google Chrome浏览器。

还有就是这个样式基于Jquery,所以要导入相关文件。

CSS样式带如下:

@charset "UTF-8";
/*=========底部提示样式========*/
body{font:14px/1.4 sans-serif; *font-size: small;word-wrap:break-word;margin:0 auto;-webkit-text-size-adjust: none; height:100%; color: #474747;}
a{ text-decoration:none; color:#474747}
.full_mark,.full_mark2{
background-color:#000;opacity:0.2;position:fixed;width:100%;height:100%;top: 0px;left: 0px;display: none;
}
.popup_alert2{
    width: 100%;
    position: fixed;
    bottom:0px;
    font-size: 1em;
    background:rgba(0,0,0,0.7) url(alert.png) no-repeat 6% center;
    background-size:auto 60%;
    display: none;
}
.popup_alert2 .cnt_details{
    padding:16px 0px;
    text-align: center;
    color: #fff;
    
}
/*=========底部提示样式========*/

JS代码如下:

$(function(){
    //遮罩
    $(".full_mark").click(function(){
        $(this).hide();
        $(".full_img_wrapper").hide();
        $(".popup_alert2").hide();
    })   
})

使用代码如下:

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css.css">
 <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
 <!-- 温馨提示,JQuery的导入要在最前面,否则引用的JS文件里面使用JQuery则无效 -->
 <script type="text/javascript" src="js.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
 <script type="text/javascript">
 function login(){
  $("#backgroup").css("display","block");
  $("#tixingimessage").css("display","block");
  $("#message_err").text("您好,谢谢您关注该提示");
 }
 </script>
</head>
<body onload="login()">
您好,请注意相关提示
</body>
</html>
<div style="display:none" id="backgroup"></div>   
<div style="display:none" id="tixingimessage">
    <div>
       <span id="message_err"></span> 
    </div>
</div>

打包下载地址:

alert.zip

点击上面连接进行下载。

推荐您阅读更多有关于“ 样式 手机端 JQUERY 提示框 ”的文章

上一篇:Apache Commons Codec 下一篇:10款免费而优秀的图表JS插件

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 8月1日,我已离开奋斗多年的北京。不知道是暂时的离开,还是永久的离别,反正已经离职在家,告别每日上班,每天苦累的煎熬,过一段属于自己的生活。以前是专职工作,现在专职生活。

    2017-08-18 12:47

  • 又弄完一个项目,累成狗,但是感觉又进步不少,除了很多坑已经踩过,做起来也是轻车熟路。同时也认识到,程序不在于你多牛逼,而是在乎你的细节把控度,而细节的关注,是一个优秀程序员必须要注意的。另外,要相信自己,勇敢向前,没人生下来就是成功的,而且,成功的路,比成功本身更重要。

    2017-06-30 09:46

  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 也许大家都已经注意到了,今年的房价,好多地方都是翻了一番,跟着就是,各地房东开始变相涨租。今年之所以搬走,就是为此,这两天同学也是如此。很多房东只认钱,别谈感情,伤钱。而对于这个城市来说,你怎么定位自己,你真把自己当成她的一份子?你来此为何?将来何去何从?自己掂量清楚。

    2016-12-05 10:03

  • 更多»

最新文章
热门文章
随机文章