Post
Ask Question
Raysefo

Raysefo

  • 1.1k
  • 284
  • 144.9k

Class Library - How to pop up custom modal pop up?

Mar 26 2013 4:09 AM

Hi,

In my web forms app. I would like to call a dll function. But in this dll function I would like to pop up a modal dialog (customized) according to a specific condition. How can I make a such dll and use it in my web forms app?

Here is my sample class library;

Imports System.Web.UI
Imports System.Web

Public Class Utility

    Public Sub ManageExpenseCulture(message As String)
        Dim page As Page = DirectCast(HttpContext.Current.Handler, Page)
        ScriptManager.RegisterStartupScript(page, page.[GetType](), "script", "alert('" + message + "')", True)
    End Sub


End Class
Here is how I want my custom pop up;

<html>
        <head>
         <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  
    <script>
        isIE = false;
    </script>
  <!--[if IE]>
    <script>
        isIE = true;
    </script>
<![endif]-->
  
  <script>
  $(function() {
    $( ".pen1" ).draggable({ handle: ".handle" }); 
        
        if ( isIE ){
                $( ".IEdeYok" ).remove();
        }
        
        $( ".pen1 .iptal" ).on("click", function(){
                alert("iptal ediyoruz \nkullanici : " +  $( "#kullanici" ).val() + " \nparola : "  +  $( "#parola" ).val() );
        });
        
        $( ".pen1 .girisyap" ).on("click", function(){
                alert("giris yapiyoruz \nkullanici : " +  $( "#kullanici" ).val() +  " \nparola : "  +  $( "#parola" ).val() );
        });
  });
  </script>
                <style>
                        .pen1{
                                position:relative;
                                top:200px;
                                left:300px;
                                background-image: url(butun-kutucuk.png);
                                width: 354px;
                                height: 220px;
                                border: solid 1px #000;
                                -webkit-border-radius: 5px;
                                -moz-border-radius: 5px;
                                border-radius: 5px;
                        }
                        
                        .pen1 input{
                                width: 183px;
                                height: 21px;
                                position: absolute;
                                top:95px;
                                left: 123px;
                        }
                        
                        .pen1 .carpi{
                                position: absolute;
                                top: -7px;
                                right: -5px;
                        }
                        .pen1 .iptal{
                                position: absolute;
                                bottom: 14px;
                                right: 18px;
                        }
                        .pen1 .girisyap{
                                position: absolute;
                                bottom: 14px;
                                right: 111px;
                        }
                        .pen1 .handle{
                                position: absolute;
                                top: 0px;
                                left: 0px;
                                height: 20px;
                                width:100%
                        }
                        
                </style>
                        <!--[if IE]>
                        <style>
                        .pen1{
                                position:relative;
                                top:200px;
                                left:300px;
                                background-image: url(butunkutu.png);
                                width:443px;
                                height: 255px;
                                border: solid 0px #fff;
                                -webkit-border-radius: 5px;
                                -moz-border-radius: 5px;
                                border-radius: 5px;
                        }
                        
                        .pen1 input{
                                width: 183px;
                                height: 21px;
                                position: absolute;
                                top:95px;
                                left: 110px;
                        }
                        
                        .pen1 .carpi{
                                position: absolute;
                                top: 0px;
                                right: 7px;
                        }
                        .pen1 .iptal{
                                position: absolute;
                                bottom: 14px;
                                right: 18px;
                        }
                        .pen1 .girisyap{
                                position: absolute;
                                bottom: 14px;
                                right: 111px;
                        }
                        .pen1 .handle{
                                position: absolute;
                                top: 0px;
                                left: 0px;
                                height: 27px;
                                width:100%
                        }
                        </style>
                        <![endif]-->
                
        </head>
        
        <body>
         
                <div class="pen1">
                        <div class="handle">&nbsp;</div>
                        <img onclick="$('.pen1').remove();" class="carpi IEdeYok" src="carpi.png"/>
                        <img class="iptal IEdeYok" src="iptal.png"/>
                        <img class="girisyap IEdeYok" src="girisyap.png"/>
                        <!--[if IE]>
                        <img onclick="$('.pen1').remove();" class="carpi" src="carpik.png"/>
                        <img class="iptal" src="cancel.png"/>
                        <img class="girisyap" src="ok.png"/>
                        <![endif]-->
                        <input id="kullanici" type="text"  />
                        <input id="parola" type="password" style="position:relative; top: 124px;" />
                        <!--[if IE]>
                        <input type="checkbox" style="position:relative; top: 160px; left : -160px;" />
                        <![endif]-->
                </div>
        
        </body>
</html>