记录是为了更好的成长！
<!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>
以上内容代表个人观点，仅供参考，不喜勿喷。。。