I want to use fancybox to popup a message if a certain button is clicked.
I want the fancybox message to only contain some text,
and a 'close' button, i dont mind using the default button if there is one.
can someone give an example of how it should be written in the html page and the js page?
any help will be much appreciated!
Assuming your button has an id of yourButton:
$("#yourButton").click(function () {
var content = $("<div>Hello<br /><br /></div>");
var button = $("<input type='button' value='Close Me!' />");
content.append(button);
$.fancybox({ content: content });
$(button).click(function () { $.fancybox.close(); });
});
This should be able to help you:
http://fancybox.net/howto
Once you have required all the relevant files, to hook it up to all linka, use this:
$("a").fancybox();
If the html is complicated enough you might prefer putting it in a hidden div as I've done below. This is a scaled down version of code I'm running on my site to do a fancybox dialog box. Works with FancyBox version 1.3.4 (I haven't upgrade to 2 yet). Personally, I like the default close button (circle X in top right corner) and even pressing Escape works, but I've added a custom close button to the popup. It includes javascript to close FancyBox.
<a id="mylink" href="#mypopup">link style button</a>
<div id="mybutton">button</div>
<div style="display:none">
<div id="mypopup">
<h1>My Title</h1>
<p>My Message</p>
<!--... other complex html can go here ...-->
<input type="button" onclick="$.fancybox.close();" value="Custom Close Button" />
</div>
</div>
<script type="text/javascript">
$('#mylink').fancybox();
$('#mybutton').click(function() {
$.fancybox({
'orig' : $(this),
'href' : '#mypopup'
})
});
</script>
Related
I have a link on my php file which when has an event listener attached to it and clicks another link on the same page.
<p>Upload the image you want on your cake:Upload </p>
<div id="openModal" class="modalDialog">
<div>X
<?php require 'image-upload.php'; ?>
</div>
</div>
<script>
$('#upload-button').on('click', function () {//This works fine
$('#upload-link')[0].click(); //This doesn't work.
});`
</script>
Now click event should click the upload-link and a modal should pop.However, nothing happens.What could be the reason and the solution?
Add jQuery to your HTML by putting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
before your custom script.
Besides as it is now, your div will always show up. you should set up a dynamic way to hide/show it.
You can use jQuery hide() and show() methods on your elements like
$("#close").click(function(e){
$("#openModal").hide();
});
also your identifiers syntax should always be the same . All camelCase or all i-dont-know-how-this-case-is-called .
I don' know why it didn't work previously but when i made some changes to the upload button link.Everything worked and the modal pops up just fine.
<p>Upload the image you want on your cake:Upload </p>
I Just changed the href from # to javascript: void(0) and everything just worked fine.
This works for me. But, (FYI), id's should not contain hyphens.
NOTE: I am only using an inline HTML event handler on #openModal to show that its click event is being triggered, but you haven't added any actions to that link, so otherwise it would do nothing. DO NOT USE INLINE HTML EVENT HANDLERS IN PRACTICE.
$(function(){
$('#uploadButton').on('click', function () {
alert("Upload Button has been clicked");
$('#uploadLink').trigger("click");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Upload the image you want on your cake:Upload </p>
I am the Open Modal link
<div id="openModal" class="modalDialog">
<div>I am the Close link
<?php require 'image-upload.php'; ?>
</div>
</div>
Automatic appear the popup window basen on condition like When i get the url http://localhost:81/Try/demo?result=false.
Below the sample code.I am using colorBox popup. It will show the popup window when i'm click the link Inline HTML.
I need automated popup if ($_REQUEST['result']==false) in PHP
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
});
</script>
</head>
<body>
<h1>WELCOME</h1>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>This content comes from a hidden element on this page.</strong>
</p>
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
Click here to download file</p>
</div>
</div>
</body>
I don't know what you mean by 'popup', but here is how to do something in javascript if 'result' is false.
<script>
<?php if($_REQUEST["result"]=="false") {
echo "alert('result is false')";
}?>
</script>
It is also possible to do this in JavaScript like so:
if (document.location.query.indexOf('result=false') !== -1) {
alert('result is false');
}
You would need some sort of modal implementation if you want to show a whole modal (ie Bootstrap Modal, jQuery UI Modal, custom, etc).
Hello I have a sign up form which is visible and I am trying to hide it when the page loads. So what I did was to put the whole form in a div class named "signup" and then hide it with a script code.
UPDATE:
html
<script>
document.write('<div class="js">');
</script>
<span class="button">Sign In</span>
<div id="signup">
<div class="modal-bg">
<div id="modal">
<span>Sign In×</span>
<form>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<a id="forgot-link" href="#">Forgot password?</a>
<button name="submit" id="submit" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
<script>
document.write('</div>');
</script>
My JS code (without hide function):
$('.button').click(function(){
$('#modal').css('display','block');
$('.modal-bg').fadeIn();
});
$('#close,.modal-bg').click(function(){
$('.modal-bg').fadeOut();
$('#modal').fadeOut();
return false;
});
Even though the hide/appear seems to work the form goes hidden if I click on it. This is a problem as no one can sign up if they can't type/click on the form.
(ISSUE FIXED)
here is the codepen (live version): http://codepen.io/mariomez/pen/WbgrNK
You don't need the signup div at all - I think it complicates things. Just start your modal background hidden so before your button click code add this:
$('.modal-bg').css('display','none');
Example
Update
to stop your form showing up whilst your page loads I would add a js div:
after your body opening tag:
<script>
document.write('<div class="js">');
</script>
before your body closing tag:
<script>
document.write('</div>');
</script>
This allows you to apply js only style, in this case for the modal-bg:
.js .modal-bg {display:none;}
and then you can remove the above js to hide the modal as it will be now in your css
updated codepen
You hide the "signup" Div but try to restore the "modal" div
This works:
$('.button').click(function(){
$('#signup').css('display','block');
$('.modal-bg').fadeIn();
});
$('#close').click(function(){
$('.modal-bg').fadeOut();
$('#signup').toggle();
return false;
});
You are looking for a div with the id "signup", but that is the class name.
$(function() {
$(".signup").hide();
});
Will hide the signup div when the page loads.
You could then use $(".signup").toggle(); on the button click event.
If you combine these, e.g.
$(function() {
$(".signup").hide();
$(".button").click(function() {
$(".signup").toggle();
});
});
Then the button displays the signup block correctly, and it is hidden on page load.
Here is the jQuery to change the CSS on page load:
$('.signup').css({
'display': 'none'
});
First method (CSS) - CodePen
#signup {
display: none;
}
Second method (jQuery) - CodePen
$('#signup').hide();
Looks like you already figured it out in your codepen paste? That code is different from your post...
Anyway, you have 3 layers of divs in your Login dialog:
#signup > modal-bg > modal
So if you want to hide #signup after loading the page:
$(function() {
$("#signup").hide();
});
then you also need to show/hide #signup in your button events.
.modal-bg and #modal are child elements of #signup, so if you remain #signup in hidden, .modal-bg and #modal will always be hidden no matter what you do on them.
By the way, I suggest you to use FireBug or general developer tools (hit F12 in chrome/IE/FIrefox) to inspect HTML elements and check what goes wrong, at least that's how I found the problem in your code.
I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>
The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.
I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});
I learned how to pass the argument with a simpler javascript confirm box, but now I'm working with this SimpleModal script, and I'm a bit lost.
I have a page with several buttons that will link to different external pages. When I click any button, the confirm box will pop up and when user clicks ok, then they are taken to that specific external link. Right now, it's hard coded for one link, but I'm not sure how to set the link for each button.
The link is currently set on this line:
window.location.href = 'https://www.sandbox.paypal.com/xxx';
The function:
$(document).ready(function () {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("<h3 class='register'>Please read and understand the Terms of these lessons before purchasing...this is important.<br /><br />By purchasing these lessons, you agree that:</h2><ul class='popup'><li class='lessonslist'><img class='imgpad' src='/images/bullet.png' alt='bullet' />You may reteach any material you have learned here, but you may NOT use the materials provided in the lessons to do so. In other words, you can do the lessons, learn the material, and teach your friend. You CAN NOT print out the transcriptions or download the videos and give them to a friend.</li><li class='lessonslist'><img class='imgpad' src='/images/bullet.png' alt='bullet' />Derivative works are ok to produce, but you can not directly copy the musical examples and profit off them without the written consent of Joel Laviolette.</li></ul>", function () {
window.location.href = 'https://www.sandbox.paypal.com/xxx';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML:"<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId:'confirm-overlay',
containerId:'confirm-container',
onShow: function (dialog) {
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}
html:
<div id='confirm-dialog'><h2>Confirm Override</h2>
<p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of <code>onShow</code> as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</form>
</div>
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<p class='message'></p>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>OK
</div>
</div>
</div>
There is also the jquery.simplemodal.js which is probably too big to post here.
So... you want to attach confirm popup for every link?
${"selector that returns all external links").click(function(e){
e.preventDefault();
confirm("Do you want to leave?", function () {
window.location.href = (e.target).attr('href');
});
});
${"selector that returns all external links")
Is not a real selector. You need to write correct one inside ${} in order to find buttons you are looking for.
Simple ready to run sample (save in html file and open) =>
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/scripts/jquery.simplemodal.js?ver=1.3.3'></script>
</head>
<body>
<a class="external-link" href="http://www.google.com">google</a>
<a class="external-link" href="http://www.bing.com">bing</a>
<a class="external-link" href="http://www.yahoo.com">yahoo</a>
<div id='modal' style='display: none; background: Silver;'>
<a href="#" class='simplemodal-close' id='yes'>leave</a>
<a href="#" class='simplemodal-close' id='no'>don't leave</a>
</div>
<script type='text/javascript'>
$(".external-link").click(function(e){ //on external link click
e.preventDefault(); //cancel immediate redirect of link
$("#modal") //selecting modal window div
.data('href', $(this).attr('href')) //saving href to modal window itself
.modal(); //showing modal window
});
$("#yes").click(function(){window.location=$("#modal").data('href')}); //if user clicks yes, redirect
</script>
</body>
</html>