INPUTBOX OR MESSAGE BOX WITH JAVASCRIPT

0
109

Introduction

Something that is much missed on the web is the typical INPUT BOX to collect user data when you click on a button. For this JAVASCRIPT gives us the prompt () function but depending on the browser has a different format and we can not control anything about the window, position, size, color, shape … bla, bla, bla. But as always, surfing the internet we can find soliciosines in JAVASCRIPT very good, and I have collected one of them and I present it here, with my little private touch.

The author is Jorge MG, who in turn was featured on this blog, and as I saw it a little … I use it, especially to be able to configure or customize it, I have simplified it a little and it has been as I present it in This blog.

Background

To the utility I have called it with Microsost Visual Basic 6, MessageBox, and as show () and inputbox () functions, so the one who is accustomed can use it more easily. To create the object we must pass an object of with the following information.

config = {
                ID : 'Message',        
                panel : 'panel',        
                title : 'title',        
                close : 'close',        
                content : 'content',    
                footer : 'footer',      
                zindex : '9999'         
          };

As you see you can customize the name of the classes to use, this way you can easily customize all the CSS that will control the windows. Then you create the object and you pass the configuration, and here it is important to note that you have to declare it AFTER the body tag.

<body>
 <script type="text/javascript">
 config = {
 ID: 'Message-input', 
 panel: 'panel', 
 title: 'title', 
 close: 'close', 
 content: 'content', 
 footer: 'footer', 
 zindex: '999' 
 };
 var test = messageWindow(config);
 </script>
</body>

Using the code

SHOW MESSAGEBOX

To show a simple window with a message, we will call the show function (data, boton1, boton2), in which we can put a maximum of two (2) buttons. We have to send from 1 to 3 parameters. The first one will define the title of the window, the message to be displayed and the width and height of the window. The other two are the buttons, the two are optional, as the close button (X) is always displayed in the upper right corner.

data = { title: 'Ventana modal', width: 400, height: 40, content: 'Mensaje de la ventana' };
boton1 = ['Aceptar', function () { alert('Has pulsado aceptar.'); }];
boton2 = ['Cancelar', '' }];
test.show(data, boton1, boton2);

As you can see in the definition of the button we can pass a function to execute after pressing the corresponding button.

MessageBox

SHOW INPUTBOX

If what we need is that the user enters some type of information, we will call the function inputbox (data, button, placeholder), all the parameters are obigatory, if it does not generate errors. The first two are exactly the same as to display a message, except that the function assigned to the button will receive as a parameter what is written in the text box. The last parameter is the text to be displayed in place holder.

data = { title: 'Ventana modal', width: 400, height: 40 };
boton = ['Aceptar', function (input) { alert('Bienvenido, ' + input); }];
test.inputbox(data, boton, 'escribre tu nombre');

InputBox

Points of Interest

The data object is a JSON, which could leave you blank, or null, the window will be created with default values. Its parameters are:

  1. Title: Title of the window, if not supplied, use the last name to create the window.
  2. Content: Contents of the window. You can pass everything you want in HTML format, including IFRAME, or images.
  3. Width: the width in pixels.
  4. Height: high in vh.
  5. To create the buttons is a two-dimensional array. The first defines the text to be displayed and the second the function to execute.

Finally you have to refer to the JAVASCRIPT file that you can download in this blog, or refer directly to my secure server

<script src="https://community-mall.com/js/messagewindow.js"></script

History

17 JUL 2017: Version 1.0.0

Original blog

LEAVE A REPLY