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

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

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

Configure the API gateway in Microservices Architecture with example in .NET Core

-
API Gateway in Microservices Architecture In a microservices architecture, an API Gateway is a layer that sits between clients and the microservices that provide the necessary functionalities. It acts as a single entry point for all client requests and handles communication between the clients and the underlying microservices. The API Gateway serves as a mediator between the client and the backend services. It receives incoming requests from clients and routes them to the appropriate microservice. It also handles authentication, authorization, load balancing, and other cross-cutting concerns such as rate limiting, caching, and request/response transformation. By providing a single entry point and a unified interface for clients, the API Gateway simplifies client access to the system and helps to decouple the client code from the underlying microservices. It also provides a central point for monitoring and logging of all the incoming requests, making it easier to identify and troublesho
Read more

Difference of High-Level Design (HLD) and Low-Level Design (LLD)

-
High-Level Design (HLD) and Low-Level Design (LLD) are software design concepts that are not specific to any programming language. However, to illustrate the differences between HLD and LLD, we can use C# programming language examples. Suppose we are designing a software system that involves creating a payment gateway application in C#.  Here are examples of HLD and LLD for this system: High-Level Design (HLD): Define the functional requirements of the payment gateway system, such as processing payment transactions, handling errors, and providing a user interface. Identify the non-functional requirements, such as performance, scalability, and security. Identify the key components of the payment gateway system, such as payment processing engine, database, user interface, and error handling. Create an architecture diagram that shows how these components will fit together to form the payment gateway system. In HLD, the focus is on defining the system's overall structure and architectu
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

Angular Coding Styles and Standards - PART 1

-
Image
Coding Styles is very important to every application. It tells how the application is clean and neat.  Every programming language has common coding styles and standards. We must follow the few of the coding styles it will very helpful to application development. Then the code will easier to understand. In this post, listed few of the angular coding styles and standards with small examples. 1. Per file, the code should limit to 400 lines. import  {  Component  }  from   '@angular/core' ; @ Component ({    selector :   'app-root' ,    templateUrl :   './app.component.html' ,    styleUrls :  [ './app.component.scss' ] }) export   class   AppComponent  {    // Per file, the code should limit to 400 lines. } 2.  Per function, the code should limit to 75 lines. public   displayUserInformationToTable ():  void  {   // Per function, the code should limit to 75 lines. } export   function   getUserName ():  void  {   // Per function, the code should limit to 75 l
Read more