How to mask everything when a popupbox is displayed in javascript - javascript

I have created a popup window and below is my script.
var action="generateCertificate";
var url=contextPath +"/MyPage/MyPage.do?actionToPerform="+action;
var myWindow=window.open(url,"","width=500,height=500");
And the script is successfully creating a popup window.
now my issue is when i click on the background of my page the popupbox is getting hided.
how to mask the background when popupbox is fired.
Plz help me.

You can use jQuery BlockUI Plugin : BlockUI.

No. There is no way to make a popup window modal. As the name itself suggests that it is a separate window.
If you want, you can use showModalDialog() in Javascript. The dialog allows you to include a jsp or html page inside
http://msdn.microsoft.com/en-us/library/ie/ms536759(v=vs.85).aspx
https://developer.mozilla.org/en-US/docs/Web/API/Window.showModalDialog
Also as suggested by others above, you can go for jQuery.

Related

In MVC with Bootstrap External Popups, can you resize?

If you load an external Modal dialog with bootstrap in MVC, its easy to set the height, for example:
$(".modal-body").height(300);
However, if I then send another view to that same popup (if they click a link within the popup which hits your controller and you return a different view to the existing popup window), then you may have a different size of content in this new view. So how can you resize the external modal dialog now?
My thought was to put JS code in that new view, and have an onload event:
<script type="text/javascript">
$(document).ready(function () {
$(".modal-body").height(530);
alert("hit.");
});
</script>
Well this code hits (the alert debug message 'hit' does show up), but the dialog height doesn't change from 300 to 530. So, perhaps the JS doesn't have access to that part of the DOM?
How can I get this second view within the same Modal dialog to have the correct height for its content?
thanks
So there was a Iframe inside of the popup and that was why the popups content size was not changed. There exists an issue where the popup content change isnt noticed anyway, but that is solved with the code I already had, posted above, but the below solves when its in an iframe if on the same domain as well.
The solution was on the site that the SRC in the iframe pointed to (the content of the popup) since hosted on the same domain, was to do:
parent.$(".modal-body").height(530);
parent.$("#myIframeId").height(500);

Click a link and stay on the same page

I am trying to navigate to another HTML file without changing pages. Basically I got an emergency button, and once clicked, it should open an HTML file which pops up a box displaying 3 other buttons. This box also has an "X" to close the window, to close this HTML file and go back to the other.
Basically I want 2 html files to display at the same time. I am currently using adobe edge animate to do the process, however I am capable to use Javascript and HTML.
To give you an idea: It is similar to when visiting a website and a box pops up asking you if you want to subscribe to the news letter, or just keep searching.
Thanks
Well. what i understand of your question. You want an html page on an html page. I suggest you could use JQuery popup screen. Visit this link. https://jqueryui.com/dialog/
If you want to call another html page without refreshing your page use Jquery .load(). http://api.jquery.com/load/
$( "#div_to_load_file_in" ).load( "path/to/your/file.html" );

fancybox difficulties with opening an html page

Please click on the Jade on this page: http://sneakyrascal.com/starpons/gallery.html
I added a fancybox to its link and the pop-up html includes a gallery which is based on jQuery and css. I believe maybe it's because there's a jQuery in the html page it won't show correctly.
You can see in this page fancybox shows an image correctly so it should work with opening an html too. http://sneakyrascal.com/starpons/about.html
It works with Chrome but not correctly in Firefox and nothing in IE.
I will appreciate any help.
This is the way that I've opened a fancybox window with an html ajax page in the past:
Define the link with the appropriate href:
<a class="fbtag" href="/some_page.html">link</a>
Using jquery, assign the fbtag class (or whatever class) to open the fancybox & link:
$('a.fbtag').fancybox();
Fancybox will take the url that you defined in the link and use it to populate the window. You can also define any options you want in the fancybox call as well.

What's the simplest way to get an image to print in a new window when clicked?

I'm trying to create a simple click to print link for an image, and what I'd like to happen is when the link is clicked, a new window opens with the image, and the browser opens the print command dialogue box.
My question is whether this is possible just from a URL parameter, or from the anchor element on the initiating page? Or do I have to build a target page with javascript to do this?
Here's a sample of what I've got:
<p class="click-2-print">
Click here to print the map above
</p>
Obviously the code above will open the image in a new window, but still requires to user to hit Ctrl+P, Cmd+P or use the browser commands. My client wants the image to "just print" when the user clicks the link, so I'm trying to find the simplest way to accomplish this.
So is there any parameters or attributes that I can add to the above markup to accomplish what I have described?
You'll have to call window.print(). Perhaps something like this?
function printimage(){
var URL = "http://myimage.jpg";
var W = window.open(URL);
W.window.print();
}
Another option may be to put the image on a page that tells the browser to print when loaded. For example...
<body onload="window.print();">
<img src="/img/map.jpg">
</body>
Cody Bonney's answer will not work in certain browsers if the full url includes the image extension. The browser will automatically download it as soon as the new tab opens. You can get around this like so.
var url = scope.src;
var w = window.open('', '');
w.document.write('<html><head>');
w.document.write('</head><body >');
w.document.write('<img id="print-image-element" src="'+url+'"/>');
w.document.write('<script>var img = document.getElementById("print-image-element"); img.addEventListener("load",function(){ window.focus(); window.print(); window.document.close(); window.close(); }); </script>');
w.document.write('</body></html>');
w.window.print();
This will open a new page with the image, prompt the user to print, and after printing, close the new tab and reset focus to the original tab.
Disregard the scope.src that is angular specific code. Everything else should work as long as you provide your own url value from somewhere else
I would recommend you create a page in whatever language or framework you are working in that accepts a querystring argument for the image path, output that image in the document and have an onload / ready call to window.print(). Link to that instead of the image directly, and keep the target="_blank" and you should be set.
You have to call window.print() in javascript to trigger the browser print dialog. I'm pretty sure you can't trigger a print without user interaction unless you run a signed applet.
Hey Jag. Although its not exactly what you are looking to do, I did write this tutorial while I was working at a web design firm. You can probably rummage that code to get the link that prints the image. Basically what this code does it add a print button to the fancybox jquery plugin. I dont see why you couldnt just use the print part to add it to whatever you need. Hope it helps.
Add print ability to fancybox jquery plugin

asp.net-mvc jquery dialog url with target=_blank doesn't work

I have a jQuery dialog showing a few items, with a link to open the item's order information in another window. This works fine on a regular view, but when I use target=_blank on a jQuery modal dialog, it does not open another browser window and instead navigates the page under the dialog to the URL.
Any ideas how to work around this, to get a popup from a jQuery dialog? Thanks!
Try using the JavaScript window.open() method instead. A sample usage would be like this:
window.open("http://www.mydomain.com", "mywindow")
You can view some documentation here: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml.
This should give you the functionality you are looking for.

Categories