Я хочу создать собственное всплывающее окно перехода, например: http://d1.internetbusinesshub.com/popup.html, используя jquery.
Это основное всплывающее окно, которое будет появляться и исчезать постоянно на экране.
Вышеупомянутое всплывающее окно было создано с использованием 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>