I've read the documentation of Magnific Popup, included the files and just copied and pasted the code from the modal popup as per the following
JsFiddle
<a class="popup-modal" href="#test-modal">Open modal</a>
<div id="test-modal" class="mfp-hide white-popup-block">
<h1>Modal dialog</h1>
<p>You won't be able to dismiss this by usual means (escape or click button), but you can close it programatically based on user choices or actions.</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a>
</p>
</div>
$(document).ready(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
But this isn't working at all, what's wrong with the code above?
There's probably problem with your externally loaded CSS in your JsFiddle. Try to remove externally loaded css and paste the content into CSS tab.
Related
I am pretty much new to Jsp stuff. What I am trying to achieve is to show contents of another jsp page lets say help.jsp in service.jsp page but only when user click ? image (? image represents help). I want to show the contents of help.jsp in a popup window and also at the same time want the main screen to fade out or non intractable.
Here is what I am doing so far. I have created a div in service.jsp
<div id="dialog" title="Basic dialog">
</div>
and created a javascript function
function openDialog() {
$("#dialog").load('/myaccount/registration/help.jsp').dialog({modal: true});
}
My anchor tag looks like this
<a tabindex="1005" href="#" onclick="openDialog();" onMouseOver="window.status='Launch Help Window'; return true" onMouseOut ="window.status='';return true"><span class="WhiteBody"><img src="images/icon_help.gif" border="0"></span></a>
When I click help button it redirect to a blank page.
Please help me !
In your HTML,
<button id="myButton">click!</button>
<div id="dialog" title="Dialog box">
My content // Have to add your jsp page here
</div>
And in your Script,
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
$("#myButton").on("click", function(e) {
e.preventDefault();
$("#dialog").dialog("open");
});
});
See the Fiddle for working sample.
I'm using a button to open a ajax html popup and a link onclick at the same time.
But the problem is I have several buttons placed on the page and with each button I want to open different links any help appreciated
Heres the html code
<a href="test.html" class="ajax-popup-link">
<button type="button" style="background:green;float:right;">
Activate
</button>
</a>
Heres the javascript function
<script src="../assets/jquery.magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
overflowY: 'scroll',
closeOnContentClick: false
});
$('.ajax-popup-link').click(function(){
window.open("/some-link.html");
});
});</script>
I have got the workaround anyway
here it is
<p onclick="window.open('http://google.com', '_new')"><a class="ajax-popup-link" href="test.html" style="top:-10px;left:650px;background:green;text-align:center;height:50px;">ACTIVATE DEAL</a></p>
In your click function, just reference the href attribute instead of hard coding the link. Also a good idea to prevent the browser's default behaviour on link click:
$('.ajax-popup-link').click(function(e){
e.preventDefault();
window.open($(this).attr("href"));
});
i added a <a> tag in my page which refers to the jQuery fancybox():
<a class='iframe' href="someLink">sth</a>
<input type="button" value=".." onclick="javascript:history.go(-1)"/>
$(document).ready(function(){
$(".iframe").fancybox({
type: 'iframe',
showCloseButton: false,
'hideOnOverlayClick':true
});
});
the painful problem is: after i click the .iframe and then close the fancybox, the page cannot goback to the previous one immediately. i need to click twice!
yes, it is in chrome browser. but it works well in FX.
what is wrong with it?!
My page is at www.danielcw.info.
At the bottom I am calling:
$(document).ready(function() {
$("#single_1").fancybox({});
});
On:
<div id="single_1">
TESTTESTEST
</div>
Nothing happens. Can anyone please explain where I am going wrong, I see all the JS and CSS loaded and on the page.
Thank you,
Daniel
Typically, Fancybox is initialized on an anchor tag which points to a div element or a link housing the content to be shown on the Fancybox:
HTML:
Click here to launch Fancybox
<div style="display:none">
<div id="single_1">
Content goes here
</div>
</div>
Javascript:
$(function(){
$('a#fancybox').fancybox({
// Fancybox options here
})
.trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});
Try using,
$(document).ready(function() {
$("a #single_1").fancybox();
});
<a id="single_1" href="#">
TESTTESTEST
</a>
You've merely instantiated the plugin. You have to trigger it now.
So you can add any DOM element and watch for an event then trigger the plugin.
Click me
The JS
$('fancyme').on("click", function() {
$.fancybox('#single_1');
});
OR
You can trigger on page load
$(function(){
$.fancybox('#single_1');
});
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>