A dialog box (Dialog) is a special window (window) that can be included in the toolbar at the top and buttons at the bottom. By default, the dialog box (Dialog) cannot change the size, but the user can set the resizable property to true so that it can change the size.
This is a dialog box.
EasyUI has two ways to create:
The first: Create through existing DOM node element tags
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Unt titled document</title><!-- Import js file--><!-- Import jquery core js file--><script type="text/javascript" src="jquery.min.js"></script><!-- Import easyi core js file --><script type="text/javascript" src="jquery.easyui.min.js"></script><!-- Import js file in local language --><script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script><!-- Import css --><!-- Import easyi's default css file --><link type="text/css" rel="stylesheet" href="themes/default/easyui.css"/><!-- Import the icon's css file --><link type="text/css" rel="stylesheet" href="themes/icon.css"/></head><body><div id="dd" data-options="iconCls:'icon-save',resizable:true,modal:true"> Prompt content</div> </body></html>
The second type: dynamically create dialog boxes through js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Unt titled document</title><!-- Import js file--><!-- Import jquery core js file--><script type="text/javascript" src="jquery.min.js"></script><!-- Import easyi core js file --><script type="text/javascript" src="jquery.easyui.min.js"></script><!-- Import js file in local language --><script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script><!-- Import css --><!-- Import easyi's default css file --><link type="text/css" rel="stylesheet" href="themes/default/easyui.css"/><!-- Import the icon's css file --><link type="text/css" rel="stylesheet" href="themes/icon.css"/></head><body><!--<div id="dd" data-options="iconCls:'icon-save',resizable:true,modal:true"> Prompt content</div> --> <div id="dd"> Dialog content</div><script type="text/javascript">$("#dd").dialog({title: 'My Dialog', //Title collapse:true, //Is it foldable minimizable:true, //Minimize button maximizable:true,//Maximize button resizable:true,//Whether to change the window size width: 400, height: 200, closed: false, cache: false, href: 'beautiful.html', });</script></body></html>The above are the two ways to create a dialog box in EasyUI introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!