锛屾杩庡叧娉ㄦ垜鐨勫叕浼楀彿锛氬墠绔ぇ渚︽帰锛屾兂蹇呭ぇ瀹堕兘鐭ラ亾HTML5涓湁dialog杩欐牱鐨勬爣绛俱€傞【鍚嶆€濅箟锛屽氨鏄竴涓€滃脊绐椻€濄€傞櫎浜嗚涔夊ソ涔嬪锛岄殢鐫€娴忚鍣ㄧ殑涓嶆柇鏇存柊杩唬锛岃繕鏈夊緢澶氫綘鍙兘涓嶇煡閬撶殑鐗规€э紝蹇潵鐪嬬湅鍚1.鎵撳紑鍜屽叧闂殑鏂规硶棣栧厛锛屽湪涓嶆煡闃呬换浣曞畼鏂规枃妗ｇ殑鎯呭喌涓嬶紝鍋氫竴涓閫夌涓€涓棶棰橈細涓嬮潰鍝粍鏂规硶锛坥pen/close锛夋槸鍚堟硶鐨勶紵鎬濊€?0绉?..馃馃馃馃姝ｇ‘绛旀鏄疌锛屼篃灏辨槸//鎵撳紑寮圭獥dialog.show()//鎵撳紑鍏抽棴dialog.close()寰堝鍚屽鍙兘浼氳涓烘槸A杩樻槸B锛屼笉杩囧畼鏂规枃妗ｇ‘瀹炴槸C锛岀‘瀹炴槸涓糠鎯戠殑鏂规硶銆傝嚦浜庡師鍥狅紝鏈夎В閲婃槸dialog鏄竴涓瓨鍦ㄤ簬椤甸潰鐨勫厓绱狅紝鎵€浠ョ敤show鎵撳紑锛宑lose鏄墦鏂脊绐椾腑鐨勮涓猴紝鎵€浠ョ敤close锛屽彧鑳借璇存槸鏈夎仈绯伙紝浣嗘槸鐗靛己闄勪細锛屽彲鑳芥槸瑙勮寖璁捐鐨勭枏蹇藉惂锛屽ぇ瀹惰浣忎簡銆傝繕鏈変竴涓紝濡傛灉闇€瑕侀粯璁ゆ樉绀哄脊绐楋紝鎴戜滑鍏堢寽鐚滅湅锛熷啀鎬濊€?0绉?..馃馃馃馃姝ｇ‘绛旀鏄疊锛屼篃灏辨槸馃ぃ鏄笉鏄拰涓婇潰鐨剆how()涓嶅吋瀹癸紵闄や簡dialog鍏冪礌锛宒etails鍏冪礌鐨刼pen灞炴€т篃鏄痮pen鐨勩€備簩銆佽〃鍗曟彁浜ゅ姛鑳藉脊鍑虹獥鍙ｅ父琚敤浣滆〃鍗曡緭鍏ャ€傛瘮濡傚脊绐椾腑闇€瑕佹湁涓€涓叧闂垨鑰呭彇娑堢殑鎸夐挳涓€鑸儏鍐典笅锛屾垜浠彲鑳介渶瑕佷娇鐢ㄥ墠闈㈡彁鍒扮殑dialog.close()鏂规硶鏉ヤ富鍔ㄥ叧闂脊绐椼€傚叾瀹炶繖鏍风殑鏁堟灉涔熷彲浠ラ€氳繃褰㈠紡鐗瑰緛鏉ュ疄鐜般€傚叿浣撴柟娉曟槸锛氬湪dialog涓祵濂椾竴灞俧orm锛屽湪form涓坊鍔犱竴涓猰ethod=dialog灞炴€у涓?dialog>娆㈣繋鍏虫敞鍓嶇澶х
杩欐牱灏卞彲浠ュ湪涓嶇粦瀹氶澶栦簨浠剁殑鎯呭喌涓嬪疄鐜板叧闂姛鑳姐€傛晥鏋滃涓嬨€傚叾瀹炲師鍥犲氨鍑哄湪绐椾綋涓婄殑method=dialog灞炴€т笂銆傚鏋滆〃鍗曞湪dialog鍏冪礌涓紝鎻愪氦鏃朵細瑙﹀彂鍏抽棴瀵硅瘽妗唄ttps://developer.mozilla.org...榛樿鎯呭喌涓嬶紝琛ㄥ崟涓殑鎵€鏈夋寜閽兘浼氳Е鍙戞彁浜わ紝鐩稿綋浜巘ype=submit锛屼絾鏄鏋渢ype璁剧疆涓?button鎴栬€卼ype=reset锛屽垯涓嶄細瑙﹀彂琛ㄥ崟鎻愪氦锛屽脊绐椾篃涓嶄細鑷劧鍏抽棴鏁堟灉濡備笅杩樻湁涓€涓皬鍔熻兘锛宒ialog涔熸湁涓€涓猺eturnValue灞炴€э紝鍙互杩斿洖琛ㄥ崟涓彁浜ゆ寜閽殑鍊?dialog>娆㈣繋鍓嶇澶х
鎻愪氦鎻愪氦returnValue鍚庡彲浠ユ墦鍗板脊绐楋紝濡備笅锛屾殏鏃舵病鎯冲埌濂界敤鐨勫満鏅€?.妯℃€佺獥鍙ｇ壒鎬у脊绐楅櫎浜嗗彲浠ラ€氳繃dialog.show()鎵撳紑澶栵紝杩樻彁渚涗簡涓€涓ā鎬佺獥鍙ｃ€傛柟娉曟槸dailog.showModal()閫氳繃璇ユ柟娉曟墦寮€鐨勫脊绐楄儗鏅皢鏄崐閫忔槑鐨勶紝姘村钩鍨傜洿瀹屽叏灞呬腑銆傝繖涓崐閫忔槑鑳屾櫙涓嶆槸鏅€氱殑鍏冪礌锛岃€屾槸涓€涓彨鍋?:backdrop鐨勪吉鍏冪礌鎺у埗鐨勶紝鐩墠鍙兘閫氳繃dailog.showModal()鏂规硶鐢熸垚銆傝嚜瀹氫箟鑳屾櫙涔熷緢瀹规槗銆俤ialog::backdrop{background:rgba(255,0,0,.25);}浣垮叾鍙樻垚鍗婇€忔槑鐨勭孩鑹层€傚鏋滆鎵撳紑鐨勫脊绐楁湁鍔ㄧ敾锛屽彲浠ヨ嚜瀹氫箟榛樿鏍峰紡锛岄€氳繃visibilitydialog瀹炵幇闅愯棌鏄剧ず{position:fixed;淇濊瘉閲戯細鑷姩锛涙彃鍥撅細0锛涘搴︼細閫傚悎鍐呭锛涢珮搴︼細閫傚悎鍐呭锛涙樉绀猴細鍧楋紱鍙鎬э細闅愯棌锛涗笉閫忔槑搴︼細0锛涜浆鎹細translateY(100px);杞崲锛?2s;}dialog[open]{鍙鎬э細鍙锛涗笉閫忔槑搴︼細1锛泃ransform:translateY(0);}鏁堟灉濡備笅鍏跺疄鎴戣繖閲屼笉鎺ㄨ崘鍔ㄧ敾鐨勶紝寮圭獥闇€瑕佸揩閫熷搷搴斻€傛坊鍔犲姩鐢讳細鎷栫疮鏁翠釜浜嬫儏銆傛澶栵紝杩樺彲浠ヤ娇鐢?modal浼被鏉ュ尯鍒嗘槸鏅€氬脊绐楄繕鏄ā鎬佸脊绐椼€俤ialog:modal{/*妯℃€佸脊绐?/}dialog:not(:modal){/*鏅€氬脊绐?/}杩欐牱鍙互鑷畾涔夋洿澶氱殑琛屼负銆傛ā鎬佸脊绐楄繕鏈変竴涓緢鐪佸績鐨勭偣锛屽氨鏄笉闇€瑕佸叧娉ㄥ眰绾с€傚畠鏈変竴濂楅潪甯哥洿瑙傜殑瑙勫垯锛屽摢涓櫄寮€锛屽摢涓骇鍒渶楂橈紝姣斿杩欎袱涓脊绐?dialogid="dialog2">......Openpop-upwindow2...濡傛灉涓嶆寚瀹歭evel锛屽垯涓€瀹氭槸鍚庨潰鏇撮珮鐨刲evel锛屼絾鏄鏋滀綘閫氳繃dialog.showModal鏉ユ墦寮€锛屽緢鐩磋锛屽悗闈㈡墦寮€鐨勫脊绐楄偗瀹氫細瑕嗙洊鍓嶉潰鐨勶紝鏁堟灉濡備笅璇村埌杩欓噷锛屾垜涔熸兂鍒颁簡涓€浜沀I缁勪欢涓偅涓彲鎬曠殑z-index搴擄紝澶ф鐜囨槸閫氳繃璁＄畻寰楀嚭鐨?.鐒︾偣闅旂鐗规€ч櫎浜嗕笂闈㈢殑涓€浜涙瘮杈冪洿瑙傜殑鐗规€т箣澶栵紝杩樻湁涓€浜涘彲鑳戒細琚拷鐣ョ殑锛屾瘮濡傜劍鐐规帶鍒躲€傞粯璁ゆ儏鍐典笅锛屽脊鍑虹獥鍙ｆ墦寮€鍚庯紝浼氳嚜鍔ㄨ仛鐒﹀湪寮瑰嚭绐楀彛涓涓€涓彲鑱氱劍鐨勫厓绱犱笂銆備篃鍙互鏈塱nput杈撳叆妗?dialog>娆㈣繋鏉ュ埌鍓嶇渚︽帰
鎵撳紑寮圭獥鍚庯紝鐩存帴杩涘叆鍗冲彲锛屼笉闇€瑕侀澶栨搷浣滐紝鏄笉鏄お鏂逛究浜嗘敞鎰忥紝娉ㄦ剰锛屾敞鎰忥細缁忚繃娴嬭瘯锛屽彂鐜帮紝濡傛灉娣诲姞寮€鍦哄姩鐢伙紝鐒︾偣鍔熻兘灏嗗け鏁堛€傚綋鐒讹紝杩欎簺鍙槸灏忓効绉戯紝澶氬姞涓€鐐笿S涔熻兘瑙ｅ喅銆備笅闈粙缁嶄竴涓郴缁熺骇鐨勭劍鐐归殧绂荤壒鎬с€傝繖鎰忓懗鐫€浠€涔堬紵涔熷氨鏄锛屽脊绐楁墦寮€鍚庯紝寮圭獥鎴愪负涓€涓嫭绔嬬殑杞戒綋锛岀劍鐐瑰彧鑳藉湪杩欎釜鑼冨洿鍐呯Щ鍔ㄣ€備篃灏辨槸璇存棤璁簍ab閿浣曞垏鎹紝鐒︾偣閮戒笉浼氳秴鍑哄脊绐椼€備笅闈㈡槸涓€涓狢ontrasteffectOrdinarypop-upeffectModalpop-upeffect杩欎釜鏁堟灉鍏跺疄鍜屾柊澧炵殑inert灞炴€у樊涓嶅锛屽彧鏄瘮inert鍑虹幇鐨勬棭銆備篃鍙互璇达紝杩欎釜闅旂鐗规€ф槸閫氳繃inert灞炴€ф硾鍖栧嚭鏉ョ殑锛岃鏅€氫汉涔熻兘浜彈鍒拌繖涓珮绾х壒鎬с€傛湁鍏磋叮鐨勫彲浠ョ湅鐪嬫垜涔嬪墠鐨勬枃绔狅細蹇€熶簡瑙ｆ儼鎬у睘鎬?.椤跺眰鐗规€op-layer鏈€鍚庝粙缁嶄竴涓柊鐨勮繛JS閮芥ā鎷熶笉浜嗙殑绯荤粺绾х壒鎬э紝top-layer銆備笉鐭ラ亾澶у鏈夋病鏈夐亣鍒拌繃杩欐牱鐨勯棶棰樸€傜敱浜庝笟鍔￠渶瑕侊紝涓€浜涘脊绐椾笉寰椾笉鍐欏湪鏌愪簺瀹瑰櫒涓嬨€傚嵆浣挎槸鍥哄畾瀹氫綅锛屾湁鏃朵篃浼氬け璐ャ€傛瘮濡備笅闈㈢殑渚嬪瓙锛屽鏋滅埗瀹瑰櫒鐩稿叧transform涓婇潰鐨勪緥瀛愭潵鑷獂y-ui涓殑dialog缁勪欢銆傛暚璇锋湡寰呭悗缁紭鍖栥€備互鍓嶏紝鎴栬€呭緢澶氭鏋讹紝閮戒細灏介噺鎶婂脊绐楁斁鍦ㄦ渶澶栧眰鐨刡ody涓嬶紝杩欐牱涓嶅彈褰卞搷锛屾瘮濡備笅闈㈡槸vue3涓殑澶勭悊鏂瑰紡
