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({
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.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
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
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.
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?
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.
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.
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.
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.
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
Member
50 Points
192 Posts
Open an Image as popup dialog
Jan 26, 2021 10:10 PM|denkyira|LINK
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');
}
}
});
});
All-Star
58164 Points
15646 Posts
Re: Open an Image as popup dialog
Jan 27, 2021 03:15 AM|bruce (sqlwork.com)|LINK
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.
Member
50 Points
192 Posts
Re: Open an Image as popup dialog
Jan 27, 2021 03:18 AM|denkyira|LINK
Hi Bruce
Thanks for your response. Do you have some example for me to see or follow?
Member
50 Points
192 Posts
Re: Open an Image as popup dialog
Jan 27, 2021 03:19 AM|denkyira|LINK
Hi Bruce
Thanks for your response. Do you have some examples for me to see or follow?
Contributor
2080 Points
664 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 10:19 AM|XuDong Peng|LINK
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
Member
50 Points
192 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 01:26 PM|denkyira|LINK
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
All-Star
53001 Points
23593 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 01:37 PM|mgebhard|LINK
Your logic does not make sense. The head tag is in the same document as the body.
Member
50 Points
192 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 01:45 PM|denkyira|LINK
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{ position:absolute; top:100px; } } <div class="cl-padding"> <div class="cdrl-container"> @RenderBody() </div> </div> @RenderSection("modal", false) @RenderSection("scripts", false) </body> </html>All-Star
53001 Points
23593 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 02:02 PM|mgebhard|LINK
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?
Member
50 Points
192 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 02:18 PM|denkyira|LINK
I am trying to show a graphic while the page loads once and when the close button click dismiss it.
All-Star
53001 Points
23593 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 02:28 PM|mgebhard|LINK
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.
Member
50 Points
192 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 02:31 PM|denkyira|LINK
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
All-Star
53001 Points
23593 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 02:35 PM|mgebhard|LINK
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.
Member
50 Points
192 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 02:38 PM|denkyira|LINK
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.
All-Star
53001 Points
23593 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 02:46 PM|mgebhard|LINK
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.
Member
50 Points
192 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 02:47 PM|denkyira|LINK
Let me give it a try and update you later
Member
50 Points
192 Posts
Re: Open an Image as popup dialog
Jan 28, 2021 06:43 PM|denkyira|LINK
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