msgbox.html5.qq .com,Pure HTML5/CSS3/JS Modal Dialog MsgBox in .NET Style

Introduction

When developing a planimeter application on my VeeTools website, there was the need for a modal user input box setting the scale for a certain map image. Modal windows in an HTML application are familiar (for example, see How TO - CSS/JS Modal, but I missed the .NET MsgBox() functionality with the ability to Ok, Apply or Cancel and to get an input value from the user. I decided to make a small module which can be inserted in any existing JavaScript namespace.

The Basics...

In the source code, you will find three files: dialogbox.html, dialogbox.js and dialogbox.css. I will not discuss the dialogbox.css here (you can alter the style of the dialogs to your own liking) apart from pointing out that it makes use of flex panels I describe in an earlier tip/trick: Pure HTML/CSS/JS Panel and Splitcontainer in .NET style.

Example 1

The dialogbox.html file contains a simple interface to test out the dialog box and some of the options. The HTML part is a straightforward collections of input and select elements. The button at the bottom calls the function cbGetDialog() in the

HTML

Copy Code

VeeTools DialogBox

DialogBox title:

DialogBox message:

The dialog.msgBox in its simplest form..."placeholder="dialog message..."style="position:absolute;left:150px;width:200px;">

Show dialog