On click link popup javascript - javascript

I want a pop up on a link on my website.
I want the pop having following code
<script data-cfasync=false src="//s.ato.mx/p.js#id=8135&type=popup&size=800x600&hourscap=1"></script>
and my link for example
`Click Me`
I want when someone click on the click me link the pop up appears. also kindly tell me how can i add pop up on the scroll bar.
I am in learning stage. kindly guide me

save the following code as .html or .php file without making any changes
<!DOCTYPE html>
<html>
<head>
<title>POPUP Demo</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
$("#btn").click(function(e){
e.preventDefault();
var newWindow = window.open("", "newWindow", "width=700");
newWindow.document.write("<p>content of popup window</p><code>echo '<b>echo php</b>';</code>");
});
});
</script>
</head>
<body>
Click me
</body>
</html>

Related

How to open a window when a window closes?

My current code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onbeforeunload="return close()">
<script>
function close() {
window.open("http://www.google.com");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onbeforeunload="return close()">
<script>
function close() {
window.open("http://www.google.com");
}
</script>
</body>
</html>
I am trying to create a new window when the website is closed, but it just closes by itself. I am new to web coding, so please do not judge my code
This was the best way to accomplish what you're trying to do, however if it's a modal you're looking for, unfortunately they don't exist yet, upon research this was the best solution I had, you could use another script that auto runs to close this page. However, as comments above describe this looks fishy to viewers, and also causes skepticism to google as to why you're doing this for your web page.
<!DOCTYPE html>
<html>
<body onBeforeUnload=" return myFunction()">
<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
Click here to go to w3schools.com
<script>
function myFunction() {
window.open("new 2.html"); // or whatever link you'd like, must be .aspx, or .html page etc.
}
</script>
</body>
</html>

$(document).open() not working under these circumstances

I apologize in advance if this has been asked before. So the circumstances I mentioned in the title is this:
I am writing html into a new window.document.open() object. The html I am writing also includes in the head.
This is the script I am not able to run,
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function(){
alert('This is working!');
});
</script>
The interesting thing is that every other jquery code works. For example in my html I have a button with id='but' and this script works
$('#but').click(function(){
alert('you clicked a button')'
});
so why is the $(document).ready() not working? Is this because window.document.open() doesn't count as document for jquery?
Thanks in advance.
edit: I think my question is unclear. I am terribly sorry about that. Here's the situation:
I have a javascript file that essentially has this:
var w=window.open();
var temp=`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Template for converted files</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="file.js"></script>
<script>
$(document).ready(function(){
alert('This is working!');
});
</script>
</head>
<body class="body">
<button id='but'>click me!</button>
</body>
</html?
`;
w.document.open();
w.document.write(temp);
the file file.js has the following:
$('#but').click(function(){
alert('you clicked a button')'
});
now when I run the first JS file, I am able to open a new window with the button. when clicked it says "you clicked a new button"
But the alert "This is working!", isn't working.
Hope this makes the situation clear. I am really sorry for not being clear from the start.
Because jQuery has no method open() in it's api.
open() is a window method only.
You can refer to the new window by passing it to a variable:
var win = window.open(url[,options])

How to set real time input value to link through iFrame?

Please see below 2 HTML pages, I have 1 page inside iFrame call other page.
what I exactly need, I want in "iframe.html" you can see text field. when I write something in that input box, real time that value should take inside href=""
Note : iframe.html page is pure html page. I can't use jquery inside that page. I have to access that page from index.html page.
I have tried some jquery code, but only I wrote function.
this is index.html page.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<iframe src="iframe.html" id="myframe"></iframe>
<script type="text/javascript">
$($("#myframe").contents().find('body')).on("click", 'a[href="#editable-link"]', function(e) {
});
</script>
</body>
</html>
And this is "iframe.html" page.
<html>
<head>
<input type="text" placeholder="Enter URL">
Read More
</body>
</html>
can anyone help me to resolve this problem. it will very helpful.
thanks in advance.
Try
$('#myframe').load(function(){
$('#myframe').contents().find('input').bind('input',function(e) {
var url = $('#myframe').contents().find('input').val();
$('#myframe').contents().find('#editable-link').prop('href',url);
});
});

How to load this JavaScript when page Loaded

I'm a newbie to programming and I want to ask something about Javascript.
How to make this script is displayed when the page is loaded?
I want to make "1 people online" with this jQuery pop up.
$(document).ready(function() {
$.sticky('1 user seen this hotel!');
});
Can you all tell me how to use it and how to modify it?
I get this function from http://www.jqueryrain.com/?uOBwr_rL
Please help me.
Thanks, gbu
Sample HTML Page
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="sticky.min.js"></script>
<link rel="stylesheet" href="sticky.min.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.sticky('The page has loaded!');
});
</script>
</body>
</html>
Please make sure you save this html content as HTML page in the same directory as your sticky.min.js & sticky.min.css files.
If you don't need the sticky functionality (i.e. if it's okay for a user to close the window), you can use an alert:
$(document).ready(function() {
alert('1 user seen this hotel!');
});
Or the jquery dialog: http://jqueryui.com/dialog/

Display multiple links in one popup window

In my application I have multiple links, each link is opened in popup window.
My idea is to open only one popup (the first link may be displayed by default),
and the others may be selected and displayed directly in this popup window. .
I'm trying to found the different possibilities to approach this result.
An Example of code I have:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Show Content</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
link1
link2
</body>
<script type="text/javascript">
var ctr=0;
function openpopup(popurl,winName){
//var winName = "win_"+(ctr++);
winpops=window.open(popurl,winName,"width=300,height=382,scrollbars=no")
}
</script>
I think just adding the winpops variable in your other popups.
your winpopups instanciate the window and gives parent/child link so if you add something like :
onclick="openpopup(this.href,'window1')"
and in your JS :
function openpopup(popupurl, winName) {
winpops = window.open(...,winName,...)
}
that should work. I didn't test it :)

Categories

Resources