How to Create Custom DialogBox using JQuery

-

Example: In this application I will show you how to create Dialog box using JQuery.


Mostly we use JavaScript Default confirmation box for yes or no options.But we can't add another option into that Default Confirmation box in that requirement we want to create custom Dialog box.

 For my requirement I need three button Yes,No and Cancel Options in Dialog Box.


Lets see how it possible with JQuery


1. Create a new webform with the name of 'UIDialog.aspx'.

 2. Add a JQuery and Css plugins for custom Dialog Box below head tag. Please see in code.

 3. Create a function in that I have three buttons in aspx page. Please see below code.

 <head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Dialog - Modal confirmation</title>
    <link href="Css/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 155,
                width: 260,
                modal: true,
                buttons: {
                    "Yes": function () {
// Your Code Here
                        $(this).dialog("close");
                        alert('U have Selected Yes');
                    },
                    "No": function () {
// Your Code Here
                        $(this).dialog("close");
                        alert('U have Selected No');
                    },
                    "Cancel": function () {
// Your Code Here
                        $(this).dialog("close");
                    }
                }
            });
        });
    </script>
</head>

 4.  Create a div with the name of 'dialog-confirm' and insert some text in the span .Please See code below.

     <div id="dialog-confirm" title="Message">
        <p>
            <span class="ui-icon ui-icon-alert" style="float: left; margin: 12px 12px 20px 0;">
            </span>Do You Want to move the Batch?</p>
    </div>


5. In this Custom Dialog Box we need Css File and Jquery plugins. Already I have mentioned Jquery Plugins in my code and for Css File we have to check this link and complete code will copy and paste to your new css file and customize the settings for your requirement.By Clicking this Link You Can Get the Code of Css

6. Please See the Complete Code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UIDialog.aspx.cs" Inherits="JqueryDialogBoxExample.UIDialog" %>

 <!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 runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Dialog - Modal confirmation</title>
    <link href="Css/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 155,
                width: 260,
                modal: true,
                buttons: {
                    "Yes": function () {
                        $(this).dialog("close");
                        alert('U have Selected Yes');
                    },
                    "No": function () {
                        $(this).dialog("close");
                        alert('U have Selected No');
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dialog-confirm" title="Message">
        <p>
            <span class="ui-icon ui-icon-alert" style="float: left; margin: 12px 12px 20px 0;">
            </span>Do You Want to move the Batch?</p>
    </div>
    </form>
</body>
</html>


Output: I have customized the Properties in Css File for my requirement, I have decreased the size of buttons and height and width of DialogBox. Please See Below Output.











Comments

Post a Comment

Popular posts from this blog

Create Custom Form Control for ng-select in Angular

-
Image
How to Create Custom Form Control in Angular  Why we create custom form control ? Normally, we used to create custom form control for re-usability.  The best advantage is that to add common functionality and features in this custom form control and extend the functionality as per our need and requirement.  And we can use everywhere into the application. But this example will tell you how to create custom form control to extend the functionality of  angular ng-select component.  We are adding a feature for this control, multi selection along with checkbox. Before that, we need to know what is the basic syntax of creating custom form control in angular. So, we start by implementing the ControlValueAccessor interface from @angular/forms into the component. This interface has three functions that need to be implemented and one optional functional. writeValue(obj: any): void { } registerOnChange(fn: any): void { } registerOnTouched(f
Read more

Send API POST Request in MS SQL Server

-
To send an API POST request in MS SQL Server using multipart/form-data, you can use the following T-SQL code: Example of content type : multipart/form-data SQL DECLARE @url VARCHAR(200) = 'https://example.com/api'; DECLARE @boundary VARCHAR(50) = '---------------------------' + CAST(NEWID() AS VARCHAR(36)); DECLARE @param1Name VARCHAR(50) = 'name'; DECLARE @param1Value VARCHAR(50) = 'John Doe'; DECLARE @param2Name VARCHAR(50) = 'email'; DECLARE @param2Value VARCHAR(50) = 'johndoe@example.com'; DECLARE @param3Name VARCHAR(50) = 'file'; DECLARE @param3Value VARBINARY(MAX) = (SELECT BulkColumn FROM OPENROWSET(BULK 'C:\path\to\file.txt', SINGLE_BLOB) AS x); DECLARE @param4Name VARCHAR(50) = 'description'; DECLARE @param4Value VARCHAR(200) = 'This is a sample file'; DECLARE @formData NVARCHAR(MAX) = N'--' + @boundary + CHAR(13) + CHAR(10) +
Read more

Restrict Special Characters Using JavaScript By Copy,Paste

-
Restrict Special Characters using copy,paste events in JavaScript. Please follow these steps: 1. Create a textbox with the name of txtValidation and add event by the name of onpaste to that textbox. <asp:TextBox ID="txtValidation" runat="server" onpaste="return Validate(this.value);"></asp:TextBox> 2. Create a Function to that event.  <script type="text/javascript">         function Validate(Value) {             var pastedData = window.clipboardData.getData('Text');             var reg = /^[a-zA-Z0-9 ]*$/             if (!reg.test(pastedData)) {                 alert('Not Accept Special Characters');                 return false;             }         }     </script> Some of the special characters are hidden when you copy,paste it will not visible. If you want to restrict those special characters in sql database only, not in application. These Special Characters is not visible whe
Read more

Display PDF Or Tiff Files In IFrame

-
How to  Display PDF Or Tiff Files In IFrame in Asp.net C# Example:  In this application how to display PDF or tiff files in IFrame in asp.net C# . First We have to Know about IFrame ,  The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. Please Click this link and Know About IFrame Before Using IFrame Tag . Mostly Iframe does not support to show the PDF files Or Tiff Files in Google Chrome and Firefox browsers,Only supports in IE Browser. For my Requirement in this application I want to show the PDF File in IFrame, which is in local shared folder (\\IPAddress\SharedFolder\Filename.PDF). I want to give this path to IFrame like  <iframe id="imgdisplay" src="" runat="server"> Mostly Browser Compatibility Issues for IFrame ,see below 1. In IE Browser, If we call this path in iframe src it will displays the PDF file. Ex: imgdisplay.at
Read more

Create Extension Method in typescript - String.IsNullOrEmpty()

-
Image
How to Create Extension Method using Typescript in Angular Application - String.IsNullOrEmpty() Step 1 : Create typings.d.ts (declaration file) in the application and declare the method in interface like below. HTML interface StringConstructor { isNullOrEmpty(value: string): boolean; } Step 2 : Create extension.ts file in the application and implement the method like below. HTML String.isNullOrEmpty = function (value: string): boolean { return value === undefined || value.trim() === '' || value === null; }; Step 3 : Usage of the Method in the component or class file. HTML import './extensions'; export class TestComponent implements OnInit { public ngOnInit(): void { let abc; console.log(String.isNullOrEmpty(abc)); } } Step 4 : Output like below.
Read more

Create a function to convert from string to Decimal using JavaScript

-
Create a function to convert a string to decimal using JavaScript. Javascript function parseStringToDecimal(inputValue: string): Number { let value: number; if (inputValue === '0.00' || Number(inputValue) === 0.00) { value = 0.00; } else if (inputValue === '') { value = null; } else { value = parseFloat(inputValue.toString().replace(/,/, '')); } return value; } Expected Result :  Example const value = parseStringToDecimal("1,000.256"); console.log(value); Output :  1000.256
Read more

Export to Excel in Angular 6 | 7 | 8 | 9 | 10

-
Image
How to export the data in excel in Angular In Angular, we have different types libraries to export the data into excel file in different formats like (.xlsx, .xls, .csv). No need to communicate the server to export the data in excel file. Here we need to know about two famous angular libraries to export the data in excel file.  1. xlsx is a library to generate excel file in different formats with graphical design. Click here xslx ✋  to know more information about this library. 2. file-saver is a library to save the files in client side.  Click here file-saver ✋  to know more information about this library.  The main advantage of using this approach is, it will improve the performance to your application. In this post, We can see how to implement the export to excel functionality using xlsx library in Angular. Step 1 :   To create new application using angular cli, open Visual Studio code tool and open the terminal (ctrl + shift + ` ).  CLI co
Read more

Remove duplicate objects/data from an array of objects in Javascript

-
How to Remove duplicate object data from an array using JavaScript. To remove the duplicate object data from an array, have to use the filter function. So, it will filter out the duplicate objects/data from an array. Please see the below example. Javascript var uniqueItems = []; var sampleData = [ { id: 1, name: 'firstname' }, { id: 2, name: 'middlename' }, { id: 1, name: 'firstname' }, { id: 1, name: 'lastname' } ] var duplicateItems = sampleData.filter(filteredData => { if (uniqueItems.find(items => items.id === filteredData.id)) { return true; } uniqueItems.push(filteredData); return false; });
Read more