The pop-up window in the lower right corner is widely used on the Internet. Although this method will greatly affect the user experience, we still have to do this if the leaders have this requirement. The following is an example of a newly written pop-up window. Scroll: Keep it at the bottom of the right side of the page while resize: Keep it at the bottom of the right side of the page when the browser changes.
Effect demonstration
Shows the effect in the lower-right corner.
Jquery Code:
<script type="text/javascript">$(function(){ $(window).load(function(){ $("div[id=newnotice]").css({"right":"0px","bottom":"1px"}); $("div[id=newnotice]").slideDown("slow"); }).scroll(function(){ $("div[id=newnotice]").css({"bottom":"0px"}); $("div[id=newnotice]").css({"right":"0px","bottom":"1px"}); }).resize(function(){ $("div[id=newnotice]").css({"bottom":""}); $("div[id=newnotice]").css({"right":"0px","bottom":"1px"}); }); $("label[id=tomin]").click(function(){ $("div[id=noticecon]","div[id=newnotice]").slideUp(); }); $("label[id=tomax]").click(function(){ $("div[id=noticecon]","div[id=newnotice]").slideDown(); }); $("label[id=toclose]").click(function(){ $("div[id=newnotice]").hide(); }); /**$.get("http://www.bkjia.com/cgi/test.xml", function(data){$(data).find('channel').find('item').each(function(index, ele){var titles = $(ele).find('title').text();var links = $(ele).find('link').text();$("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');})}); **/});</script>
HTML Code:
<Div id = "newnotice"> <p> <span class = "title"> top news </span> <span id = "bts"> <label class = "button" id = "tomin" title = "minimized" >_</label> <label class = "button" id = "tomax" title = "maximized"> port </label> <label class = "button" id = "toclose" title = "close"> × </label> </span> </p> <div id = "noticecon"> <ol> </ol> </div>
Hottest news ×