locked
Open an Image as popup dialog RRS feed

  • Question

  • User457850011 posted

    I am trying to open an Image as a popup on the application first load automatically. The popup needs to come before the body of the application loads hence I am implementing the popup as a Jquery dialog from the html <HEAD></HEAD> but it is not working.

    Below is my code. Any help will be appreciated.

     $(function Popup() {
               
                $("<div id='dialogId'></div>");
                var img = new Image();
                img.src = "../Content/Images/ample.png";
                $('#dialogId').append(img);
                $('#dialogId').dialog({
                  
                    resizable:false,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    }
                });
                
            });

     

    Tuesday, January 26, 2021 10:10 PM

Answers

  • User457850011 posted

    I have come up with a solution although not what I wanted, but it is working. I have created an html page with a div to load the image and button click.  Then in my Global.asax file, on Session_Start, redirect to that splash page. On Ok button click after the user reads the content, redirect to the main application. If there is any better solution,let me know

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 28, 2021 6:43 PM

All replies

  • User-474980206 posted

    it won't work. you have the code in a $.ready() that wait until the Dom is loaded, then you dialog which moves the html for the modal to the end of the body.

    you should define the dialog as a static that is open by default (no javascript). the dialog should be first. the document need to be well formed. one approach is two div. one is modal, the other is the content with the hidden class. on ready hide the dialog, and display the content. 

    Wednesday, January 27, 2021 3:15 AM
  • User457850011 posted

    Hi Bruce

    Thanks for your response. Do you have some example for me to see or follow?

    Wednesday, January 27, 2021 3:18 AM
  • User457850011 posted

    Hi Bruce

    Thanks for your response. Do you have some examples for me to see or follow?

    Wednesday, January 27, 2021 3:19 AM
  • User-939850651 posted

    Hi denkyira,

    Here is a simple demo:

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
        <script>
            $(function () {   //or  $(document).ready(function(){......})
                $('<div/>', { id: 'dialogId' }).appendTo('body');
                $('#dialogId').append('<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/><br/>');
    
                //append image through JS
                $('#dialogId').dialog({
                    resizable: false,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        
    </body>

    For more details, you could refer to jQuery ready function.

    Best regards,

    Xudong Peng

    Thursday, January 28, 2021 10:19 AM
  • User457850011 posted

    Hi Peng

    Thanks for your response. The issue with this demo is, it is showing the Image on the body of the page. I need the Image to open before the page shows up hence the reason why I am creating the script on the html head. This my issue. Open the Image popup then the body of the page

    Thursday, January 28, 2021 1:26 PM
  • User475983607 posted

    Thanks for your response. The issue with this demo is, it is showing the Image on the body of the page. I need the Image to open before the page shows up hence the reason why I am creating the script on the html head. This my issue. Open the Image popup then the body of the page

    Your logic does not make sense.  The head tag is in the same document as the body. 

    Thursday, January 28, 2021 1:37 PM
  • User457850011 posted

    Hi

    I am using MVC5 layout and here is the complete layout code

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Demo Application</title>
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="@Url.Content("~/Scripts/html5shiv.min.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/respond.min.js")" type="text/javascript"></script>
        <![endif]-->
        <!-- Scripts -->
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/modernizr")
        <script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.custom.min.js")" type="text/javascript"></script>
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/bootstrap-table")
        <script src="@Url.Content("~/Scripts/moment.min.js")" type="text/javascript"></script>
        @Scripts.Render("~/bundles/layout")
        <script>
            $(document).ready(function () {
                debugger;
                $('<div/>', { id: 'dialogId' });
                $('#dialogId').append('<img src="../../Content/Images/ample.png"/>');
    
                //append image through JS
                $('#dialogId').dialog({
                    resizable: false,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    }
                });
            });
       var customAlert = new Alert(window.sessionStorage);
                    customAlert.displayAlert();
        </script>
         
    
        @Styles.Render("~/Content/css")
        @RenderSection("styles", false)
         
        <meta name="description" content="Demo Master page." />
    </head>
    <body>
        <nav class="navbar navbar-default  navbar-static-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-static-top imgBackground">
                <img src="@Url.Content("~/Content/Images/Logo.png")" alt="logo" />
                <img src="@Url.Content("~/Content/Images/NewLOGO.png")" alt="logo2" />
            </div>
            <div class="navbar-collapse collapse">
                @Html.Partial("_LoginPartial")
            </div>
            
    
        </nav>
    
    
        @section Styles {
            #content{
            ;
            top:100px;
            }
        }
     
        <div class="cl-padding">
            <div class="cdrl-container">
                @RenderBody()
            </div>
        </div>
        @RenderSection("modal", false)
        @RenderSection("scripts", false)
    </body>
    </html>

    Thursday, January 28, 2021 1:45 PM
  • User475983607 posted

    Showing your layout is no help.  What is your requirement?  Are you trying to show a splash screen when the application starts?  Are you trying to show a graphic while the page loads? 

    Thursday, January 28, 2021 2:02 PM
  • User457850011 posted

    I am trying to show a graphic while the page loads once and when the close button click dismiss it.

    Thursday, January 28, 2021 2:18 PM
  • User475983607 posted

    denkyira

    I am trying to show a graphic while the page loads once and when the close button click dismiss it.

    Your current design approach will not work.  The first step is to render a page that has the graphic dialog.  Then make a second request (form the page with the graphic) to load the page with the long load time.  When the long running page returns from the server, it will overwrite the page with the graphic.

    There are other ways to do this but I think the steps above are the simplest.  

    Thursday, January 28, 2021 2:28 PM
  • User457850011 posted

    Thanks. let me give it a try and will let you know. I will create a page with the graphics to load before the layout then call the layout after that

    Thursday, January 28, 2021 2:31 PM
  • User475983607 posted

    Thanks. let me give it a try and will let you know. I will create a page with the graphics to load before the layout then call the layout after that

    Your response does not make sense.  Are you trying to display a transition image when moving between pages?  Clearly, explain the problem you are trying to solve.

    Thursday, January 28, 2021 2:35 PM
  • User457850011 posted

    I just want to display a pop up Image with some text for the users to read before loading the main page. They read it once, click ok then never see it again. It doesn't have to up again when they navigate to other pages. 

    Thursday, January 28, 2021 2:38 PM
  • User475983607 posted

    I just want to display a pop up Image with some text for the users to read before loading the main page. They read it once, click ok then never see it again. It doesn't have to up again when they navigate to other pages. 

    Your current design approach is far to simplistic.  First design the image page.  Show the image page if the user has not clicked "ok".  You can save if the user clicked the "ok" button using a cookie or a database table if the user logs in.  

    Thursday, January 28, 2021 2:46 PM
  • User457850011 posted

    Let me give it a try and update you later

    Thursday, January 28, 2021 2:47 PM
  • User457850011 posted

    I have come up with a solution although not what I wanted, but it is working. I have created an html page with a div to load the image and button click.  Then in my Global.asax file, on Session_Start, redirect to that splash page. On Ok button click after the user reads the content, redirect to the main application. If there is any better solution,let me know

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 28, 2021 6:43 PM