WordPress

WordPress

WordPress建站及WordPress SEO相关话题
Shopify

Shopify

Shopify建站及Shopify SEO相关话题
Google SEO

Google SEO

Google SEO相关话题
SEM

SEM

SEM相关话题
Zoho

Zoho

Zoho SAAS相关产品使用话题讨论
EDM

EDM

讨论Email Marketing相关话题
Symantec SSL

Symantec SSL

讨论Symantec SSL安全相关话题
隽永东方售后服务

隽永东方售后服务

隽永东方售后服务专区

关于WP Engine空间

WordPressLeo 发表了文章 • 1 个评论 • 39 次浏览 • 6 天前 • 来自相关话题

细心的朋友可能会发现,其实WP正是WordPress的简称,这也就意味着WP Engine与其他美国主机商是不一样的,因为WP Engine只提供WordPress主机产品。
目前WP Engine主机共提供STARTUP、GROWTH、SCALE三款主机方案,都是非常适合用来搭建WordPress网站的。不过需要注意的,WP Engine主机价格却不便宜,最低价格是35美元/月(年付款可赠送2个月免费使用时间)
当然了,我还是不推荐这种主机的,没有操作上的难点,适合服务器小白使用,但是价格高,简言之,拿钱换方便,全自动,所谓全自动,也就是你的所有空间信息、域名信息(因为要绑定域名)也全是被其他人掌握的,你只需小手一点,一切便开始,便结束了。(好吧,这话是违心了)
废话不多说,以下是关于这个WP Engine的使用方法,我把迁移网站需要的一些必要设置列一下(顺序不分先后):
1、add domain (注意带www,我试过不带www,不会自动跳转,即使你解析那www记录添加了也不会跳转)




2、创建sftp 用户
3、wp-site-migrate安装这个插件(我已上传至附近,也可以在官网下载) 需添加你的wp engine登入邮箱、域名(注意带www)、主机ip地址和上一条提到的sftp用户名和密码,然后就可以开始Migrate迁移
4、迁移的时候只需配置前面几项,后面可选的可以不填,域名(带www),sftp用户名密码、ip地址,save一下就可以下一步,看到迁移进度条了,总共三个进度条,等全部100%之时,网站便已迁移成功可以打开了。
5、网站的用户名密码将是迁移之前网站的用户名密码
6、接着你可以配置ssl证书,最便宜的空间套餐是只能用空间提供的免费ssl和购买空间提供的rapidssl;
你还可以开启你网站的cdn;配置网站备份backup point以防万一;配置重定向等等;
 
在WP Engine空间成功开通一个网站后,也算是小小的颠覆了我以往对于网站开通的理解,当然是步骤上而非理念,不过是将步骤简化吧。
可能这就是一个新的趋势吧,所谓创新即将想法付诸于商业。 查看全部
细心的朋友可能会发现,其实WP正是WordPress的简称,这也就意味着WP Engine与其他美国主机商是不一样的,因为WP Engine只提供WordPress主机产品。
目前WP Engine主机共提供STARTUP、GROWTH、SCALE三款主机方案,都是非常适合用来搭建WordPress网站的。不过需要注意的,WP Engine主机价格却不便宜,最低价格是35美元/月(年付款可赠送2个月免费使用时间)
当然了,我还是不推荐这种主机的,没有操作上的难点,适合服务器小白使用,但是价格高,简言之,拿钱换方便,全自动,所谓全自动,也就是你的所有空间信息、域名信息(因为要绑定域名)也全是被其他人掌握的,你只需小手一点,一切便开始,便结束了。(好吧,这话是违心了)
废话不多说,以下是关于这个WP Engine的使用方法,我把迁移网站需要的一些必要设置列一下(顺序不分先后):
1、add domain (注意带www,我试过不带www,不会自动跳转,即使你解析那www记录添加了也不会跳转)
1.png

2、创建sftp 用户
3、wp-site-migrate安装这个插件(我已上传至附近,也可以在官网下载) 需添加你的wp engine登入邮箱、域名(注意带www)、主机ip地址和上一条提到的sftp用户名和密码,然后就可以开始Migrate迁移
4、迁移的时候只需配置前面几项,后面可选的可以不填,域名(带www),sftp用户名密码、ip地址,save一下就可以下一步,看到迁移进度条了,总共三个进度条,等全部100%之时,网站便已迁移成功可以打开了。
5、网站的用户名密码将是迁移之前网站的用户名密码
6、接着你可以配置ssl证书,最便宜的空间套餐是只能用空间提供的免费ssl和购买空间提供的rapidssl;
你还可以开启你网站的cdn;配置网站备份backup point以防万一;配置重定向等等;
 
在WP Engine空间成功开通一个网站后,也算是小小的颠覆了我以往对于网站开通的理解,当然是步骤上而非理念,不过是将步骤简化吧。
可能这就是一个新的趋势吧,所谓创新即将想法付诸于商业。

关于升级wordpress5.0遇到的坑

WordPresschad 发表了文章 • 1 个评论 • 55 次浏览 • 2018-12-08 14:25 • 来自相关话题

做项目登录后台,哇塞,wordpress5.0发布更新,请及时更新。果断点了,不能忍,顺带带着体验新界面,学习新技术的想法。话说,更新一时爽,随之而来的bug确是蛋疼的一批。
首页我看到了一个巨丑的编辑器Gutenberg,方便以区块的形式构建页面,尼玛,这不坑爹吗?像我这种专业的老司机,让我用这玩意,而且最尼玛无语的是这玩意真的巨丑无比。具体丑到什么程度,废话不多说,上图为敬:
标题那么大,空白那么多,你这也太随意了点。
不管那么多,继续构建我的网站,等等,尼玛我的大神器Wpbakery去哪里了,旧的postType里到还能看到,可是新创建的分类,完全不见了神器的踪迹。没了这玩意,就仿佛掏空了我的心,这尼玛不是扯淡吗?果断打开Wpbakery设计界面,一切正常,隐藏自带编辑器功能开启,再次打开新创建的分类。嗯?尼玛出现了,但好像是给人家当了小弟,5.0自带的巨丑编辑器在上面,我滴大神器就生生的跟在它的下面。尼玛,不管了,还是继续工作重要,当我好不容易将页面元素填充到我的大神器中,点击保存。再次刷新,叮叮叮,尼玛大神器内一片空白。俨然从大神器变成了一块废铁,凑不要脸额gutenberg,尼玛这是斩草除根那。真是不能忍,还是乖乖将wordpress版本降低到4.9.8吧,我真是嫌弃古藤,打心底厌恶。找谷哥大大要资源的时候偶然看到,安装“Classic Editor plugin ”插件,可切换回原来的TinyMCE编辑器。尼玛,仿佛看到亲妈一样,这插件作者仿佛拯救了我滴小命,果断下载装之。我的大神器又回来了,来来感受下颜值:




完美!
  查看全部
做项目登录后台,哇塞,wordpress5.0发布更新,请及时更新。果断点了,不能忍,顺带带着体验新界面,学习新技术的想法。话说,更新一时爽,随之而来的bug确是蛋疼的一批。
首页我看到了一个巨丑的编辑器Gutenberg,方便以区块的形式构建页面,尼玛,这不坑爹吗?像我这种专业的老司机,让我用这玩意,而且最尼玛无语的是这玩意真的巨丑无比。具体丑到什么程度,废话不多说,上图为敬:
标题那么大,空白那么多,你这也太随意了点。
不管那么多,继续构建我的网站,等等,尼玛我的大神器Wpbakery去哪里了,旧的postType里到还能看到,可是新创建的分类,完全不见了神器的踪迹。没了这玩意,就仿佛掏空了我的心,这尼玛不是扯淡吗?果断打开Wpbakery设计界面,一切正常,隐藏自带编辑器功能开启,再次打开新创建的分类。嗯?尼玛出现了,但好像是给人家当了小弟,5.0自带的巨丑编辑器在上面,我滴大神器就生生的跟在它的下面。尼玛,不管了,还是继续工作重要,当我好不容易将页面元素填充到我的大神器中,点击保存。再次刷新,叮叮叮,尼玛大神器内一片空白。俨然从大神器变成了一块废铁,凑不要脸额gutenberg,尼玛这是斩草除根那。真是不能忍,还是乖乖将wordpress版本降低到4.9.8吧,我真是嫌弃古藤,打心底厌恶。找谷哥大大要资源的时候偶然看到,安装“Classic Editor plugin ”插件,可切换回原来的TinyMCE编辑器。尼玛,仿佛看到亲妈一样,这插件作者仿佛拯救了我滴小命,果断下载装之。我的大神器又回来了,来来感受下颜值:
log.png

完美!
 

zoho salesiq设置时候的一个注意点,设置错误会导致网站报错,影响加载

WordPressLeo 发表了文章 • 1 个评论 • 32 次浏览 • 2018-12-05 09:14 • 来自相关话题

上图这个报错,就是因为在salesiq设置的时候,开启了公司logo功能,而并没有上传logo,这个要注意,发现不少用了salesiq的网站都有这个报错。
下图为其中一处关闭logo按钮的地方,总共有两处设置logo的地方,一个是浮动框,一个是内容框





  查看全部

4.png

上图这个报错,就是因为在salesiq设置的时候,开启了公司logo功能,而并没有上传logo,这个要注意,发现不少用了salesiq的网站都有这个报错。
下图为其中一处关闭logo按钮的地方,总共有两处设置logo的地方,一个是浮动框,一个是内容框
3.png


 

隽永东方教您如何通过设置WHM下的ModSecurity™ Tools来应对WordPress暴力登陆

WordPressEastern_Design_Studio 发表了文章 • 0 个评论 • 67 次浏览 • 2018-12-02 11:47 • 来自相关话题

最新备注:有发现用此教程方法开启安全设定以后,WordPress正常登录也被挡掉了,后来研究发现是其中  949110: Inbound Anomaly Score Exceeded  这条规则挡掉的,我们尝试把ID号为949110的规则关闭掉,WordPress就可以正常登录后台了。

近期美国服务器频繁发现有大量的wp-login.php进程消耗服务器资源,经过简单分析发现类似的进程都是暴力登陆WP网站的垃圾进程,手工挨个关闭效率极低,根本无济于事,于是设想通过某些服务器的过滤规则来应对类似的CC攻击。
 
经过一段时间的研究得出如下方法,能最大程度的应对类似的暴力攻击。
 
登陆WHM后台,点击左侧的 Security Center » ModSecurity™ Tools » Edit Custom Rules 如下图:
 















 
第三张图所示的地方插入代码:SecUploadDir /tmp
SecTmpDir /tmp
SecDataDir /tmp
SecRequestBodyAccess On
SecAction phase:1,nolog,pass,initcol:ip=%{REMOTE_ADDR},initcol:user=%{REMOTE_ADDR},id:5000134
<Locationmatch "/wp-login.php">
# Setup brute force detection.
# React if block flag has been set.
SecRule user:bf_block "@gt 0" "deny,status:401,log,id:5000135,msg:'ip address blocked for 5 minutes, more than 10 login attempts in 3 minutes.'"
# Setup Tracking. On a successful login, a 302 redirect is performed, a 200 indicates login failed.
SecRule RESPONSE_STATUS "^302" "phase:5,t:none,nolog,pass,setvar:ip.bf_counter=0,id:5000136"
SecRule RESPONSE_STATUS "^200" "phase:5,chain,t:none,nolog,pass,setvar:ip.bf_counter=+1,deprecatevar:ip.bf_counter=1/180,id:5000137"
SecRule ip:bf_counter "@gt 10" "t:none,setvar:user.bf_block=1,expirevar:user.bf_block=300,setvar:ip.bf_counter=0"
</locationmatch>
ErrorDocument 401 default点击保存。
至此,您会发现,进程里边所有wp-login.php的进程都消失了,服务器负载也急速下降,问题fix了。 查看全部


最新备注:有发现用此教程方法开启安全设定以后,WordPress正常登录也被挡掉了,后来研究发现是其中  949110: Inbound Anomaly Score Exceeded  这条规则挡掉的,我们尝试把ID号为949110的规则关闭掉,WordPress就可以正常登录后台了。


近期美国服务器频繁发现有大量的wp-login.php进程消耗服务器资源,经过简单分析发现类似的进程都是暴力登陆WP网站的垃圾进程,手工挨个关闭效率极低,根本无济于事,于是设想通过某些服务器的过滤规则来应对类似的CC攻击。
 
经过一段时间的研究得出如下方法,能最大程度的应对类似的暴力攻击。
 
登陆WHM后台,点击左侧的 Security Center » ModSecurity™ Tools » Edit Custom Rules 如下图:
 

F1C1EE0FA511EA6D0853298A186BD8E9.png


C3B6C03D33B336A96E26485D0883B815.png


57EACD4C-262F-45D1-8BA9-C181A9AE9708.png

 
第三张图所示的地方插入代码:
SecUploadDir /tmp
SecTmpDir /tmp
SecDataDir /tmp
SecRequestBodyAccess On
SecAction phase:1,nolog,pass,initcol:ip=%{REMOTE_ADDR},initcol:user=%{REMOTE_ADDR},id:5000134
<Locationmatch "/wp-login.php">
# Setup brute force detection.
# React if block flag has been set.
SecRule user:bf_block "@gt 0" "deny,status:401,log,id:5000135,msg:'ip address blocked for 5 minutes, more than 10 login attempts in 3 minutes.'"
# Setup Tracking. On a successful login, a 302 redirect is performed, a 200 indicates login failed.
SecRule RESPONSE_STATUS "^302" "phase:5,t:none,nolog,pass,setvar:ip.bf_counter=0,id:5000136"
SecRule RESPONSE_STATUS "^200" "phase:5,chain,t:none,nolog,pass,setvar:ip.bf_counter=+1,deprecatevar:ip.bf_counter=1/180,id:5000137"
SecRule ip:bf_counter "@gt 10" "t:none,setvar:user.bf_block=1,expirevar:user.bf_block=300,setvar:ip.bf_counter=0"
</locationmatch>
ErrorDocument 401 default
点击保存。
至此,您会发现,进程里边所有wp-login.php的进程都消失了,服务器负载也急速下降,问题fix了。

在Woocommerce后台订单列表页面添加购买产品的详细信息

WordPressBob 发表了文章 • 1 个评论 • 45 次浏览 • 2018-11-29 17:13 • 来自相关话题

现在越来越多的用户开始使用woocommerce来搭建自己的电商网站,woocommerce插件的后台界面已经非常详细的列出了相关信息,但是如果想在订单列表页面添加用户所购买产品的详细信息,需要在主题跟目录下面的functions.php文件里面添加一下代码:
add_filter( 'manage_edit-shop_order_columns', 'show_product_order',15 );
function show_product_order($columns){

//添加一列信息
$columns['product-display'] = __( 'Central Pedder Building Gallery Tour');
return $columns;
}然后在当前这段代码的下面在添加一段代码:
add_action( 'manage_shop_order_posts_custom_column' , 'snv_custom_shop_order_column', 10, 2 );
function snv_custom_shop_order_column( $column ) {
global $post, $woocommerce, $the_order;

switch ( $column ) {
case 'product-display' :
$terms = $the_order->get_items();

if ( is_array( $terms ) ) {
foreach($terms as $term)
{
echo $term['item_meta']['_qty'][0] .' ' . $term['name'] .'';
}
} else {
_e( 'Error!', 'woocommerce' );
}
break;

}
}后台显示的效果如下图所示:




  查看全部
现在越来越多的用户开始使用woocommerce来搭建自己的电商网站,woocommerce插件的后台界面已经非常详细的列出了相关信息,但是如果想在订单列表页面添加用户所购买产品的详细信息,需要在主题跟目录下面的functions.php文件里面添加一下代码:
add_filter( 'manage_edit-shop_order_columns', 'show_product_order',15 );
function show_product_order($columns){

//添加一列信息
$columns['product-display'] = __( 'Central Pedder Building Gallery Tour');
return $columns;
}
然后在当前这段代码的下面在添加一段代码:
add_action( 'manage_shop_order_posts_custom_column' , 'snv_custom_shop_order_column', 10, 2 );
function snv_custom_shop_order_column( $column ) {
global $post, $woocommerce, $the_order;

switch ( $column ) {
case 'product-display' :
$terms = $the_order->get_items();

if ( is_array( $terms ) ) {
foreach($terms as $term)
{
echo $term['item_meta']['_qty'][0] .' ' . $term['name'] .'';
}
} else {
_e( 'Error!', 'woocommerce' );
}
break;

}
}
后台显示的效果如下图所示:
QQ图片20181129171311.png

 

WP Favorite Posts 的使用方法(可用于收藏文章、产品)

WordPressLeo 发表了文章 • 1 个评论 • 45 次浏览 • 2018-11-28 10:10 • 来自相关话题

首先 WP Favorite Posts安装这个插件,




配置插件,最重要的是 Don't load js file这个选项要勾选,这样当你收藏这个产品的时候页面会自动刷新,列表就会更新。我之前试过不勾选这个选项,结果是我收藏了产品,但是列表没有更新(需要我手动去刷新页面)。
                <div class="favorite">
                    <?php wpfp_link() ?> //这是调用收藏按钮
                    <?php dynamic_sidebar( 'sidebar-4' ); ?> //这是这个插件在小工具widgets中提供的收藏列表功能,我这个小工具的id为sidebar-4
                </div>
 





 
具体效果如下图所示:










  查看全部
首先 WP Favorite Posts安装这个插件,
3.png

配置插件,最重要的是 Don't load js file这个选项要勾选,这样当你收藏这个产品的时候页面会自动刷新,列表就会更新。我之前试过不勾选这个选项,结果是我收藏了产品,但是列表没有更新(需要我手动去刷新页面)。
                <div class="favorite">
                    <?php wpfp_link() ?> //这是调用收藏按钮
                    <?php dynamic_sidebar( 'sidebar-4' ); ?> //这是这个插件在小工具widgets中提供的收藏列表功能,我这个小工具的id为sidebar-4
                </div>
 

4.png

 
具体效果如下图所示:

1.png


2.png

 

window.print()如何打印指定区域

WordPressLeo 发表了文章 • 2 个评论 • 53 次浏览 • 2018-11-21 14:47 • 来自相关话题

@media print{
    .noprint{
        display: none;
    }
}
定义一个class,noprint
然后可以给你不想打印的地方加上noprint这个class,这样打印的时候就会隐藏这些elements。
一般我们可以给头部、底部加上这个class。
 
其实window.print()就是执行了浏览器自带的一个打印功能,让我们不用在浏览器上找打印,而直接通过点击网页上面任意一个已规定好的元素,进行打印。发现这种打印是没办法打印JavaScript以及多数css(有少部分css样式可以打印出来),只能就是打印一下图文 查看全部

@media print{
    .noprint{
        display: none;
    }
}
定义一个class,noprint
然后可以给你不想打印的地方加上noprint这个class,这样打印的时候就会隐藏这些elements。
一般我们可以给头部、底部加上这个class。
 
其实window.print()就是执行了浏览器自带的一个打印功能,让我们不用在浏览器上找打印,而直接通过点击网页上面任意一个已规定好的元素,进行打印。发现这种打印是没办法打印JavaScript以及多数css(有少部分css样式可以打印出来),只能就是打印一下图文

推荐两个lazy load 插件

WordPressLeo 发表了文章 • 1 个评论 • 48 次浏览 • 2018-11-21 10:19 • 来自相关话题

1、​a3 Lazy Load   (10W激活量,可放心使用)





 
2、Lazy Load by WP Rocket 作者WP Media  是wp-rockets开发团队开发的补丁插件,只需激活即可
 

经过测试,这两个插件在多数网站是没有问题的,具体根据不同网站实际情况使用。网站加载速度有肉眼可见的提升,不过在得分上面还是没有很明显的提升,因为谷歌对各项资源加载的要求是非常苛刻的,举例:一张1920px*500px的banner图,压缩至200kb不到,但是谷歌要求你还要减掉一半多的资源大小,这样肯定会严重影响图片清晰度。
谷歌page得分提升之路漫长,仍需努力! 查看全部
1、​a3 Lazy Load   (10W激活量,可放心使用)

1542765987(1).jpg

 
2、Lazy Load by WP Rocket 作者WP Media  是wp-rockets开发团队开发的补丁插件,只需激活即可
 

经过测试,这两个插件在多数网站是没有问题的,具体根据不同网站实际情况使用。网站加载速度有肉眼可见的提升,不过在得分上面还是没有很明显的提升,因为谷歌对各项资源加载的要求是非常苛刻的,举例:一张1920px*500px的banner图,压缩至200kb不到,但是谷歌要求你还要减掉一半多的资源大小,这样肯定会严重影响图片清晰度。
谷歌page得分提升之路漫长,仍需努力!

产品详情页可以用的放大镜效果

WordPressLeo 发表了文章 • 2 个评论 • 67 次浏览 • 2018-11-16 13:49 • 来自相关话题

效果图:








 
/*引入资源*/
<link rel="stylesheet" href="css/smoothproducts.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>
 /*html+php*/             
       <div class="sp-wrap">
                            <?php if( have_rows('image_gallery') ): ?>
                            <?php while( have_rows('image_gallery') ): the_row(); 
                                        $image = get_sub_field('add_img');
                                        $image_url = $image[url];
                            ?>
                            <a href="<?php echo $image_url ?>">
                                <img alt="<?php the_title();?>" src="<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url ?>&w=400;&h=400;&zc=1" width="400" height="400" class="img-responsive"/>
                            </a>
                           <?php endwhile;endif;?>
                    </div>
 
/*jquery配置*/
<script type="text/javascript">
    /* wait for images to load */
    $(window).load(function() {
        $('.sp-wrap').smoothproducts();
    });
</script>
 
资源包下载:
看附件 查看全部
效果图:
2.png

1.png

 
/*引入资源*/
<link rel="stylesheet" href="css/smoothproducts.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>
 /*html+php*/             
       <div class="sp-wrap">
                            <?php if( have_rows('image_gallery') ): ?>
                            <?php while( have_rows('image_gallery') ): the_row(); 
                                        $image = get_sub_field('add_img');
                                        $image_url = $image[url];
                            ?>
                            <a href="<?php echo $image_url ?>">
                                <img alt="<?php the_title();?>" src="<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url ?>&w=400;&h=400;&zc=1" width="400" height="400" class="img-responsive"/>
                            </a>
                           <?php endwhile;endif;?>
                    </div>
 
/*jquery配置*/
<script type="text/javascript">
    /* wait for images to load */
    $(window).load(function() {
        $('.sp-wrap').smoothproducts();
    });
</script>
 
资源包下载:
看附件

利用bootstrap模态框做网站升级维护的提示消息框

WordPressLeo 发表了文章 • 1 个评论 • 63 次浏览 • 2018-11-14 09:12 • 来自相关话题

 <link rel="stylesheet" href="/notification/css/bootstrap.min.css">
<script src="/notification/js/jquery.min.js"></script>          
<script src="/notification/js/bootstrap.min.js"></script>
  <!-- 模态框(Modal) -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            Website is being upgraded and maintained
                        </h4>
                    </div>
                    <div class="modal-body">
                        We will resume normal access as soon as possible<br>
                        Expect one hour,Stay tuned<br>
                        <div id="show"></div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    <script>
         //加载模态框
         $('#myModal').modal();

        var show = document.getElementById("show");  
        setInterval(function() {   
        var time = new Date();   // 程序计时的月从0开始取值后+1   
        var m = time.getMonth() + 1;   
        var t = time.getFullYear() + "-" + m + "-"     
        + time.getDate() + " " + time.getHours() + ":"     
        + time.getMinutes() + ":" + time.getSeconds();   
        show.innerHTML = t;  
        }, 100); 

    </script>
<style>
/*模态框*/
.modal-body{
    font-size: 18px;
}
#show{
    font-size: 30px;
}
.modal-open{
    overflow-y: scroll;
    padding-right: 0 !important;
}
/*主要是最后一个css样式,是fix掉bootstrap模态框关闭时的抖动问题*/
</style> 查看全部
1.png

 <link rel="stylesheet" href="/notification/css/bootstrap.min.css">
<script src="/notification/js/jquery.min.js"></script>          
<script src="/notification/js/bootstrap.min.js"></script>
  <!-- 模态框(Modal) -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            Website is being upgraded and maintained
                        </h4>
                    </div>
                    <div class="modal-body">
                        We will resume normal access as soon as possible<br>
                        Expect one hour,Stay tuned<br>
                        <div id="show"></div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    <script>
         //加载模态框
         $('#myModal').modal();

        var show = document.getElementById("show");  
        setInterval(function() {   
        var time = new Date();   // 程序计时的月从0开始取值后+1   
        var m = time.getMonth() + 1;   
        var t = time.getFullYear() + "-" + m + "-"     
        + time.getDate() + " " + time.getHours() + ":"     
        + time.getMinutes() + ":" + time.getSeconds();   
        show.innerHTML = t;  
        }, 100); 

    </script>
<style>
/*模态框*/
.modal-body{
    font-size: 18px;
}
#show{
    font-size: 30px;
}
.modal-open{
    overflow-y: scroll;
    padding-right: 0 !important;
}
/*主要是最后一个css样式,是fix掉bootstrap模态框关闭时的抖动问题*/
</style>