Popout Modal FB likes - javascript

May I know what the name of this function or is there any references to do the function similar to the image below.
I would like to load this when the website is loaded.
I found some method is do using Modal Box but it seem to be not really proper.
Or this is the only way to do it?
Please guide me from here.

You can use jquery onload function and put the relevant code for popup window.
(https://api.jquery.com/load-event/) or you can use `window.onload=Load().
There are many popup window jquery modals - http://www.jquerybyexample.net/2013/01/jquery-popup-window-tutorial-plugins.html
I personally recommend you to use http://dinbror.dk/bpopup/ , I have tried that and it's cool.
$( window ).load(function() {
$('element_to_pop_up').bPopup();
});
Hope you got the answer :)

JQuery has it's own native Modal Popup window.
$("test").dialog({
modal: true,
height: 140
});
Should get you started.
INFO: http://jqueryui.com/dialog/#modal

Related

setTimeout alert with a link hyperlink in it? coupon message pop up after 30 seconds

Is there any way to make the link in this setTimeout alert clickable? I'm just trying to give visitors to my website 5% OFF link after spending 30 seconds on my website but I need the link to be clickable if possible.
<script type = "text/javascript">
setTimeout(function(){alert("Get 5% OFF at: mysite.com/5-OFF ")},30000);
</script>
I don't have to accomplish this by setTimeout but I don't know of any other way. Any help or suggestions much appreciated. Here I seem to always get the best.
Use a UI Widget from one of the many widget libraries for this. Modern websites should not use the javascript alert anywhere , but perhaps for testing(maybe).
Unfortunately you can only display text in the alert function. If you want to put in a URL, you can do it by using jQuery UI's dialog or Twitter Bootstrap's modal window (for example).
EDITED TO INCLUDE ANSWER TO YOUR QUESTION
Something along the lines of:
setTimeout(function() { $( "ELEMENT" ).dialog( "open" ); }, 30000);

javascript style alert with link before user navigates away from page

I am looking at having a alert style box show up when a user tries to leave the page but I what I wanted to do is have a share link in the alert style box
I have read this ticket javascript before leaving the page and now am unsure if this is possible.
I realise this will run
$(window).bind('beforeunload', function(){
alert("hi");
});
Now I know you cannot add links to an alert window so am trying to get round this another way but cant think of how i would display a alert/popup before going to another page that has a link in
Can anyone suggest anything - is there a plugin that might do this?
Its better you not do even if u do a hack as if you find a bug and use it to do it one they they will fix it and you will be again at same point. This is a security risk suppose i want to close a tab and in code you opne new popups or do malicious things???? So browserts dont allow it. If user wants to go they are allowed u can use standard
window.onbeforeunload = function() { return 'You have unsaved changes!'; }
if you like So try this. istead of custom things.
DEMO
You cannot add links to an alert window. What you could do is use a jQuery Plugin like http://jqueryui.com/dialog/#default and call it within beforeunload function.
HTML
<div id="dialog" title="My Link">
My Link
</div>
jQuery
$(window).bind('beforeunload', function(){
$( "#dialog" ).dialog();
});
OR if don't want to use jQuery you could use a window.open
eg: http://www.quirksmode.org/js/popup.html

jQuery popup (bPopup) fails to close as expected

I have created a popup using the lightweight jQuery plugin: bPopup.
I want the popup to appear on page load, and as such have the following code:
<script>
;(function($) {
$(window).load(function(){ //see edit below
$('#popup').bPopup({
opacity: 0.6,
modalClose: true
});
});
})(jQuery);
</script>
the customisation modalClose: true controls weather or not the popup is closed/dismissed on clicking on the popup, or surrounding overlay (see API)
However my popup successfully appears but does not dismiss, either when clicking on overlay OR when clicking on the element with the class that controls dismissal (by default, any element with class 'b-close' will also close the popup.
Any thoughts on where I am going wrong, or how I can find out what aspect is not working? Thanks
EDIT:
As per a suggestion in comments I have altered $(window).load(function(){ to $(document).ready(function(){however my problem persists
Discovered I was using 0.7.1 version of the popup, updated to 0.9.1 and that seems to have resolved the issue. Thanks to those who took a look.

close Shadowbox from inside iframe using 2 methods

I have already searched SO for similar questions, and none of the methods worked for me.
I have a shadowbox which opens on the click of an as so:
Open
This works fine and my forms work best with this method (ie I can close my forms easily using
window.parent.Shadowbox.close();
Problem.. I have a page which ajax's in data, and I wanted to load a shadowbox for these "future" elements, I thought of doing this by using the jquery delegate function.
// Open our form manually
$('body').delegate("#video-form-edit", "click", function(e){
e.preventDefault();
var url = $(this).attr('href'); // Our URL
Shadowbox.open({
content: url,
player: "iframe",
height: 400,
width: 510
});
});
// If I want to close ^ this ^ shadowbox, how do i do it?
// window.parent.Shadowbox.close(); // Doesnt work
The problem is that I can't close the form that is opened using the delegate method using the above "externally" loaded shadow box,
Is their a better way of doing this? How do I close a shadowbox loaded using the delegate methods.
EDIT
I keep getting error Cannot call method 'close' of undefined.
EDIT 2
Right well, since no answer, I've found I can use:
parent.window.location = parent.window.location.href;
To redirect to the parent window, Although this is not what Im looking for, it could be a solution for someone.
Duh.. I can't believe no one got it!, 18 Hours later..
I needed to Change the ID to a class
Change $('body').delegate("#video-form-edit", "click", function(e){
To ----->$('body').delegate(".video-form-edit", "click", function(e){
And also in my ahref.
Now everything works as normal in all my shadowbox, for all elements now or future.

Jquery, Modal,Lightbox Popup - open automatically with Java Call

I've searched and searched and tried and tried but I can't find an answer to my question - any help greatly appreciated.
I trying to get a Jquery modal popup of any description (I really don't mind which one I use) to launch automatically when called from Java.
I can get the popups to work, get them to work on pageload but I need it to be able to launch from a bit of Java script.
I'll explain...currently I have a from that uses some Java to check any entry as it typed against a database. If the entry is not present, a second form opens on a new page to enable the individual to make an entry.
This all works perfectly the only thing I'd like to change is to have the second form open in a nice popup such as fancybox/colorbox/lytebox etc.
Currently I have this bit of Java
function findValue(li) {
if( li == null ) return window.location = "http://www.gotosecondform.com"
All a want to do is be able to call a nice popup iframe rather than go to the web address.
Could anybody help and explain the best way to do this? - I suspect it's quite simple but I just can't find anything on the net that isn't based on page load and clickable links.
I'm not fussed in regard to which Lightbox spin off I use.
Thanks in advance and all example greatly appreciated.
Chris
I assume by Java you mean Javascript. Java and Javascript is not related. As to your question, is this what you are looking for? I've used jquery UI
http://jqueryui.com/demos/dialog/
First, initialize the modal, but don't open it
$( ".selector" ).dialog({ autoOpen: false }); //add any other options you want
To open it in your method
function findValue(li) {
//if( li == null ) return window.location = "http://www.gotosecondform.com"
$( ".selector" ).dialog("open")
}
That's it!
EDIT - Made it work with an iframe
Well, you could wrap it in an iframe and put it in there if you want.
Your HTML
<div class='selector'>
<iframe src='' id='iframe'></iframe>
</div>
Your new JS
function findValue(li) {
if( li == null ) {
$('#iframe').attr('src, 'http://www.gotosecondform.com');
$( ".selector" ).dialog("open")
}
}
There you go, iframe in a JQUI dialog. Of course, you'll need to style it appropriately. But this should give you the base

Categories

Resources