cPanel Css警报

以下是我对解决方案的看法。我只会在我觉得我所做的和你所展示的在某些方面有所不同的地方发表评论。

首先,我的示例使用引导和Jquery,因此下面几行位于顶部。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js">
</script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

您仍然需要两种媒体查询。

/*FOR MOBILE*/
@media only screen and (max-width:420px)
{
    #dst{display:none;}
    #loading{
        width: 175px;
        height: 150px;
    }
}

当屏幕小于420px时:

1. 你想隐藏#dst(措辞[h4/p])

Z

/*FOR DESKTOP*/
@media only screen and(min-width:421px)
{
#dst{display:initial;}
}

当屏幕超过421像素时,您需要重置#dst。

<script type="text/javascript">
    $(function()
    {
        $("#btnSignin").on("click", function()
        {
            spinner();
        });
    });

    function spinner()
    {
        $('#overlay').toggle();
    }
</script>

第一个调用是通用文档“onready”函数,因此当页面完全加载时,它将为按钮分配一个onclick事件。

在标签中,或者更好的是在外部css文件中,添加前面提到的两个@media调用和以下css。

#overlay
{
    display: none;
    position: fixed;
    top: 0;
    left: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: wait;
}

1. 我只是改变了左边的位置,这样我的按钮示例就不会被#覆盖层覆盖
2. 移除-webkit转换:translate3d(0,0,0);不需要。
3. 添加光标:等待;

Z

#loading
{
    border:1px solid #f5ba1a;
    padding: 0px;
    margin: auto;
    width: 410px;
    height: 150px;
    background: rgb( 255, 255, 255) url('https://image.ibb.co/dCLkxo/IMG_20180607_072610_027.jpg') 0px 50% no-repeat;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

2. 补充马林:汽车;因此,随着屏幕的调整,边距也将同样调整。
5. 将位置从固定更改为绝对。这也将允许加载根据屏幕移动进行调整。
6. 移除显示:无;这是不需要的,因为它包含您的微调器图像
7. 将z指数从3000改为3。不必为大数字而疯狂

#ntf, #h4
{
    color: #d80;
}

Z

#dst
{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 4;
    padding-left: 160px;
    padding-right: 5px;
}

1. 移除边框:1px实心#f5ba1a;不是真的需要,但是如果你想的话,你可以把它加回去。

4. 移除显示器。这一切都是独立的,所以这是不需要的。

6. 添加了左填充和右填充

  <button class="button" id="btnSignin">Sign In</button>

    <div class="container">
        <div id="overlay">
            <div id="loading">
                <div id="dst">
                    <h4 id="h4">Please Wait!</h4>
                    <p id="ntf">Please wait... it will take a second!</p>
                </div>
            </div>
        </div>
    </div>

1. 您没有正确嵌套元素。把我的和你的比较一下。
2. 你可以忽略。。。东西我只是习惯于在bootstrap工作。

还请注意,在这种设置下,“加载”部分在屏幕调整大小时垂直和水平居中。

使用media query for mobile,可以在移动设备上隐藏加载程序的内容。

此外,您还需要将文本内容分组到加载器中,以便更容易隐藏它

@media(max-width:421px) {
  #text-group {
    display: none;
  }
}

上面的代码检查屏幕的宽度是否小于500px(u可以使用任何值),然后隐藏加载程序的内容。

/*For desktop no need to add media query*/
/*Put ur styles here*/
/*For desktop it take above styles */

/*For mobile */
/*u need to hide the text group*/

@media(max-width:421px) {
  #text-group {
    display: none;
  }
}

<div id="loading">
  <div id="dst"> Gif here </div>
  <div id="text-group">
    <h4 id="h4">Please Wait!</h4>
    <p id="ntf">Please wait... it will take a second!</p>
  </div>
</div>