jquery dialog屬性的簡單配置
阿新 • • 發佈：2019-01-01
記錄是為了更好的成長！
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Dialog - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> .ui-widget-header { background:#fff; border:none; } #dialog{margin: 0;padding:0;} #img{position: relative;} </style> <script> $( function() { $("#dialog").hide(); $("#btn").click(function(){ $("#dialog").dialog({/*buttons:{ //為彈框新增按鈕，可以為不同的按鈕分別定義事件 "確定":function(){}, "取消":function(){$(this).dialog("close");} },*/ width : "600", //寬度 height : "400", //高度 resizable: false, //是否可以縮放 fit:true, //彈框大小根據瀏覽器自適應 autoOpen:true, //是否開啟,如果為false,彈框功能失效 closeOnEscape:true, //彈框開啟之後按下Esc鍵,true:關閉,false:無效 modal:true, //與overlay配套使用,開啟彈框之後瀏覽器視窗變色 overlay: { //true:生效, false:無效 backgroundColor: '#ff6700', opacity: 0.3, }, open:function(event,ui){ //隱藏close "X" 關閉按鈕 //$(".ui-dialog-titlebar-close", $(this).parent()).hide(); //$(".ui-widget-header").hide(); //隱藏title } , }); }); }); </script> </head> <body> <button id="btn" >提交</button> <div id="dialog" > <img id="img" src="img/2019-01-01_190941.png" width=100% height=90%> </div> </body> </html>
以上內容代表個人觀點，僅供參考，不喜勿噴。。。