How to initialize a dialog without a title bar ?
The task is to initialize a dialog without a title bar. In this article, we will see how to initialize the dialog box without any title bar.
A Dialog box is used to provide information in a particular way on the HTML pages. It creates a small window that is protected from the page content. If you want to change its size, color, or any other stuff then just have to edit a few codes and if you want to close that dialog box then you just have to click on the ‘X’ button that is present on the right side of the dialog box.
A dialog box is used to provide more information regarding the topic. It looks systematic when we use this kind of widget in your web application.
Approach:
Example:
HTML
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" > < script src = "//code.jquery.com/jquery-1.12.4.js" > </ script > < script src = "//code.jquery.com/ui/1.12.1/jquery-ui.js" > </ script > < style > button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } body{ text-align:center; } </ style > </ head > < body > < h2 style = "color:green" >w3wiki</ h2 > < button id = "opener" >open the dialog</ button > < div id = "dialog" title = "Dialog Title" > I'm a dialog </ div > < script > $( "#dialog" ).dialog({ autoOpen: false }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); $(".ui-dialog-titlebar").hide(); }); </ script > </ body > </ html > |
Output:
Contact Us