Fancybox popup in ASP.Net web form


In this post, I am going to explain you how to use fancy box to open a portion of you page as modal or non-modal popup.
Lets get started

Step 1 – Required javascript files for this example.

You can download the JQuery and fancybox api’s using the provided hyperlinks.

                    <script src="jquery-1.8.3.js" type="text/javascript"></script>


                    <script src="jquery-ui.js" type="text/javascript"></script>

                    <script type="text/javascript" src= "jquery.fancybox-1.3.4.js"></script>
                    <link rel="stylesheet" href="jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
 

 Step 2 – HTML code for Popup window.

                    <div style="display:none">
            <div id="AddNew">
                    <table>
                                             <tr>
                                         <td>Title</td>
                                         <td><input type="text" id="txtTitle"/></td>
                                             </tr>
                             </table>
            </div>
        </div>

 

Step 3 – Add a button or link on page, when user click on this control, the “AddNew” html code will open in a popup window. In this example I am going to use the hyperlink.

<a href="#AddNew" id="inline" >UK Morning Checks & Issues - List</a>

 

Step 4 - JQuery code to open the Popup

<script lang="javascript" type="text/javascript">
    $(document).ready(function () {
        $("a#inline").fancybox({
            'hideOnContentClick': false,



            'autoScale': false,
            'autoDimensions': false,
            openEffect: 'none',
            closeEffect: 'none',
            width: 200,
            height: 200,
            'modal': false
        });
    });
</script>

 

Step 6 – You can make the popup window modal and non-modal my changing the property of modal.

 

Modal – 

<script lang="javascript" type="text/javascript">
    $(document).ready(function () {
        $("a#inline").fancybox({
            'hideOnContentClick': false,
            'autoScale': false,
            'autoDimensions': false,
            openEffect: 'none',
            closeEffect: 'none',
            width: 200,
            height: 200,
            'modal': true
        });
    });
</script>

 

Non-Modal

<script lang="javascript" type="text/javascript">
    $(document).ready(function () {
        $("a#inline").fancybox({
            'hideOnContentClick': false,
            'autoScale': false,
            'autoDimensions': false,
            openEffect: 'none',
            closeEffect: 'none',
            width: 200,
            height: 200,
            'modal': false
        });
    });
</script>


Step 5- Final outcome



Comments

Post a Comment

Popular posts from this blog

SSIS Merge Join - Both inputs of the transformation must contain at least one sorted column, and those columns must have matching metadata SSIS

Image
SSIS Merge Join Issue ( Both inputs of the transformation must contain at least one sorted column, and those columns must have matching metadata SSIS )   I was working on one of my client requirement where I need to split the flat file data based on the conditions and then add join that data with reference data (again a flat file). I used the MergeJoin task to achieve this. Unfortunately I ended up with this error. I tried most of the options available on the internet but none of them worked for me because my mistake was silly I set a property of “Sort” task in one not the other. That’s why MergeJoin was throwing “ Both inputs of the transformation must contain at least one sorted column, and those columns must have matching metadata SSIS ” error.     Lets first discuss about the solution of my problem Root Cause – The main problem was related to the Sort task. I selected the “Comparison Flags” option in one Sort task but not in other task because of that M...
Read more

jsGrid

Image
I was working one a Asp.Net MVC application where I was using the Web Grid to display the data based on the selected search criteria. It was working great but client asked me to use the jsGrid instead of Web Grid as it has many ready to use features like (Edit, Delete, Search, etc..).  Initially, jsGrid gave me very hard time to display the data in it but after few hit and trial I manage to display the data. After spending couple of hours on jsGrid, I started liking it. In this article, I am going to explain how to use the jsGrid to display the data and some other tactics in very easy steps. I am building the application in ASP.NET MVC. Step 1. Content delivery network (CDN) of jsGrid and jQuery libraries are as below https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css https://code.jquery.com/jquery.min.js ...
Read more

Web scraping through WebBrowser (.Net WinForm Control)

Image
In this post, I am going to explain how it is easy to extract and change the the web-page content through Web-Browser control. The Web-Browser is a Microsoft windows form control and easy to use. This post will explain you how you can use this control for your need. The Web-Browser control is used to display the web-page in your application. The Web-Browser class is a powerful class that give you leverage to manipulate the html code, interact with JavaScript, automate the web scrapping and many more. You can find more about the Web-Browser from MSDN library. The following steps will guide you how to use the Web-Browser. 1.         The first thing that you should do is to create a windows application project. 2.         Add a Web-Browser and two button controls on web form.   3.         Set the “Url” property of the control or you can do this by writing...
Read more