You must Sign In to post a response.
  • Category: HTML

    How to show the form like dialog box?

    Friends,

    i am designing my web page in html. i have lot of web pages in my project. i want to show the form like dialog box? how to show the form like dialog box?
  • #748669
    try this.. :)

    <html>
    <head>
    <title>JavaScript Popup Example 3</title>
    </head>
    <script type="text/javascript">
    function poponload()
    {
    testwindow = window.open("", "mywindow", "location=1,status=1,scrollbars=1,width=100,height=100");
    testwindow.moveTo(0, 0);
    }
    </script>
    <body onload="javascript: poponload()">
    <h1>JavaScript Popup Example 3</h1>
    </body>
    </html>

    for more info.. :)

    http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

    But it is more better and reliable to use jQuery popup or dialogue box instead of window popup

    http://jqueryui.com/dialog/

    http://jsfiddle.net/db5SX/

    http://imperavi.com/redactor/examples/uidialog/

    http://dev.jtsage.com/jQM-SimpleDialog/demos/string.html

    http://salman-w.blogspot.in/2013/05/jquery-ui-dialog-examples.html

    http://www.raymondcamden.com/2009/2/1/Creating-a-Dialog-with-jQuery-UI

    Regards,
    Nirav Prabtani (Senior Web Developer)
    Email : niravjprabtani@gmail.com
    blog : niravprabtani.blogspot.in

  • #748674
    Hi,

    If you want to open your page like a window then use below sample code when you need to open the window.

    EX:

    ScriptManager.RegisterStartupScript(this, this.GetType(), "myalert", "javascript:openModalPopup('" + URL + "');", true);


    and wrote the below sample javascript code in your page.


    <script type="text/javascript" language="javascript">
    function openModalPopup(page) {

    var ht = $(window).height();
    var wt = $(window).width();

    if (page != null) {
    var $dialog = $('<div id="dialog"></div>')
    .html('<iframe id="ifModal" style="border: 0px; overflow: scroll; position: fixed;" src="' + page + '" width="100%" height="100%"></iframe>')
    .dialog({
    autoOpen: false,
    modal: true,
    height: ht,
    width: wt
    });
    $dialog.dialog('open');
    }
    }
    </script>



    Try, something like above to achieve your goal.

    Hope this will help you....

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #748678
    Just take use of JavaScript and you can complete your code, use Window.Open method to open page as dialog box
    see below snippet

    <html>
    <head>
    <title>JavaScript Popup Example 3</title>
    </head>
    <script type="text/javascript">
    function openWin()
    {
    testwindow = window.open("", "mywindow", "location=1,status=1,scrollbars=1,width=100,height=100");
    testwindow.moveTo(0, 0);
    }
    </script>
    <body onload="javascript: openWin()">
    <h1>JavaScript Popup Example</h1>
    </body>
    </html>

    hope it helps

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #748687
    Open the form as a popup

    here is a code.



    var msgWindow = null;
    function showFileView(iId)
    {
    msgWindow = window.open("FileContentView.aspx?fileid="+iId, "tinyWindow", 'status=1, resizable=1, scrollbars=0, width=650,height=480');
    msgWindow.focus();
    if(!msgWindow.closed)
    {
    if(navigator.appName == "Netscape")
    msgWindow.location.refresh;
    else
    msgWindow.location.reload(true);
    msgWindow.focus();
    }
    }


    Thanks & Regards
    Anil Kumar Pandey
    Microsoft MVP, DNS MVM

  • #748691
    Hi,

    Please check the below code, You just need to change the height and width. Here I have used fixed widh and height. Using below code you can adjust the height and width according to your wish and users screen resolution. I didn't modify it according to your function but there is nothing complex in this code. Let me know if you have doubts on any part of this code.



    function ShowPopUp()
    {

    var w = 480, h = 100;

    if (document.all || document.layers)
    {
    w = screen.availWidth;
    h = screen.availHeight;
    }

    var popW = 500, popH = 200;
    var leftPos = (w-popW)/2, topPos = (h-popH)/2 ;

    window.open('Popup.aspx ,'popup','width=' + popW + ',height=' + popH + ',top='+ topPos + ',left=' + leftPos + 'resizable=0,menubar=0,scrollbars=1');

    }


    Regards,
    Asheej T K

  • #748755
    Hi,

    As you want to show a form like dialog box, so just put that form in a page and then open that page in as a dialog box ie. pop up message. Just set the width and height of the box and you will get that. This can be done like below-

    function dialogbox()
    {
    diagwindow= window.open("", "test.htm", "location=1,status=1,scrollbars=1,width=450px,height=300px");
    diagwindow.moveTo(100, 100); //set according to need for position
    }

    And now just call this function where ever you need.

    Thanks,
    Ashutosh Jha
    http://tricksroad.com


  • Sign In to post your comments