我想创建自定义转换弹出窗口,如下所示:
http://d1.internetbusinesshub.com/popup.html
这是一个基本的弹出式菜单,将在屏幕上连续出现和消失。
上面的弹出窗口是使用jqueryMobile创建的。我只想使用简单的jquery来实现期望的结果。
尝试使用jQuery和CSS进行转换,但没有成功。
var i = 0;
$(document).ready(function() {
$("#popup_div").fadeIn();
setInterval('autoRefreshPopup()', 4000);
});
function autoRefreshPopup() {
i++;
if (i > 20) {
i = 1;
}
refreshContent(i);
var $element = $('#popup_div');
$("#popup_div").fadeIn();
setTimeout(function() {
$("#popup_div").fadeOut();
}, 3000);
}
function refreshContent(i) {
var msg = '';
switch (i) {
case 1:
msg = "text1";
break;
case 1:
msg = "text12";
break;
case 2:
msg = "text13";
break;
case 3:
msg = "text14";
break;
msg = "text";
}
$('#popup_content').html(msg);
}
#popup_div {
background: #00a8a9 !important;
color: #ffffff !important;
font-size: 12px !important;
font-family: Verdana !important;
font-weight: bold;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
position: fixed;
width: 20%;
border-radius: 5px;
}
#popup_content {
padding: 5px 5px 5px 5px;
text-align: center;
}
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<p id="p_head">This is a paragraph. This text has no alignment specified.</p>
<div align="center" style="border:1px solid red; height:800px;">
This is some text in a div element!
</div>
<p>This is a paragraph. This text has no alignment specified.</p>
<div id="popup_div">
<p id="popup_content">text1</p>
</div>
</body>
