> 웹 프론트엔드 > HTML 튜토리얼 > 一款公用的CSS+DIV弹窗_html/css_WEB-ITnose

一款公用的CSS+DIV弹窗_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:43:53
원래의
1187명이 탐색했습니다.

为了方便以后自己使用!

 

<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代码:

$().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");        }
로그인 후 복사

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿