html 页面加载器GIF - 图像下方的文本

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 页面加载器GIF - 图像下方的文本相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <title></title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<style type="text/css">

	body.loading {
	    overflow: hidden;   
	}

	body.loading .page_loader {
	    display: block;
	}
	
	.page_loader {
	    display:    none;
	    position:   fixed;
	    z-index:    1000;
	    top:        0;
	    left:       0;
	    height:     100%;
	    width:      100%;
	    background: rgba(0, 0, 0, 0.71) ; 	    
	}
	
	.image_preloader {
	    text-align: center;
	    left: 40%;
	    top: 20%;
	    position: absolute;
	    display: block;
	    margin: 0 auto;
	    max-width: 344px;
	}
	
	.image_preloader p {
	    color: rgb(251, 10, 73);
	    font-weight: bold;
	    font-size: 25px;
	    text-shadow: 2px 2px #fff8f8;
	}

}

</style>



</head>
<body>



<div class="container">

	<div id="wrapper">
		<h1>Spinner GIF demo</h1>
		<form action="#" method="post" onsubmit="return validateForm();">
			<input type="text" id="fname" name="fname" value="Dummy Input" /><br>
			<input type="submit" name="submit" value="Submit" />
		</form>
	
	</div>


</div>


<div class="page_loader"></div>


<script>

function validateForm() {

    var fname  = $('#fname').val();

    if (fname == null || fname == "") {
        alert("We need your first name to verify your identity.");
        return false;
    }

    else {

 	 	$body = $("body");
        $body.addClass("loading").append("<div class='image_preloader'><img src='https://prestigepay.com/wp-content/themes/pop/images/spinner.gif'><p>Please wait... Do not hit back or refresh the page.</p></div>");
	

		return true;
	}

}

	
</script>


</body>
</html>

以上是关于html 页面加载器GIF - 图像下方的文本的主要内容，如果未能解决你的问题，请参考以下文章

使用微调器加载 jQuery 整个 HTML 页面

在 Bootstrap X-editable 中添加加载器图像/文本

在每次页面访问或页面重新加载时显示一个新的 GIF

单击图像时显示文本

将文本添加到固定预加载器

纯色背景上的透明透明预加载器图像