search

Home >Web Front-end >HTML Tutorial >A public CSS DIV pop-up window_html/css_WEB-ITnose

A public CSS DIV pop-up window_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:43:531190browse

For your own convenience in the future! 

<html><head><style>.winmainshow { background: #fff; padding: 10px 5px 5px 25px; line-height: 25px; border: 1px solid #333; position: fixed; z-index: 1000; border-radius: 10px; color: #999; }</style></head><body><!--遮罩背景--><div id="shadow" class="winbg" style="display: none"></div><div id="UserFeedbackamin" class="winmainshow" style="display: none;">               </div><input type="button" id="afeed" value="弹出"></body></html>

javascript code: 

$().ready(function () { $("#afeed").click(function () {                var strc = ' <label> <input id="yjjy" class="c_opinion" name="one" type="radio" value="1" />意见建议</label>';                strc += '<label> <input id="tj" class="c_opinion" name="one" type="radio" value="2" />bug提交</label> <label><input id="tsjb" class="c_opinion" name="one" type="radio" value="3" />投诉举报</label>';                strc += '<label><input id="xqbx" class="c_opinion" name="one" type="radio" value="4" />寻求帮助</label>';                strc += '<br/><label id="labmsg"></label>';                windowCenteredfeed("#UserFeedbackamin", "", 600, 400, strc);            });$("#closeIframe").live("click", function () {                $("#loginPanel").animate({ 'top': '50%', 'left': '50%', 'height': '0px', 'width': '0px', 'opacity': '0.1' }, function () { $("#loginPanel").hide(); $("#shadow").hide(); });            });});function windowCenteredfeed(obj, title, width, height, content) {                        $("#shadow").show();            $(obj).show();            $(obj).css('height', '0px').css('width', '0px').css('top', $(window).height() / 2 + 'px').css('left', $(window).width() / 2 + 'px').css('opacity', '0.1');            $(obj).html("<div class=\"winwork\">" + title + "<i id='closeIframefeed' class=\"close\">&times;</i></div>" + content);                        $(obj).animate({ 'height': height + 'px', 'width': width + 'px', 'top': ($(window).height() - height) / 2 + 'px', 'left': ($(window).width() - width) / 2 + 'px', 'opacity': '1' }, "slow");        }

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3实现Drop-shadow_html/css_WEB-ITnoseNext article：CSS3实现Drop-shadow_html/css_WEB-ITnose

Related articles

See more