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.
Related
Does anyone know a jQuery plugin just like an ads popup that can show information? I want it to show it the page and put a search form area on it so that the client can search on the dialog box.
Here is a popup in jQuery
all you have to do is change the content in the div
you could execute the script on load or when a link or button is clicked to do this you have to change the function
resources
https://jqueryui.com/dialog/
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
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.
I'm loading a dialog from another page using load. I'm trying to load it inside a DIV. Now i need only the dialog box area to be added inside my div , not the entire blank space that are present in the page from which i load the dialog. how can it be done ?
$(document).ready(function(e) {
$('#content').load('dialog.html');
});
HTML
<div id="content">
</div>
Dialog.html
$(document).ready(function(e) {
$('#wrapper').dialog({
appendTo:'#content'
});
});
<body>
<div id="wrapper">
</div>
</body>
i tried load('dialog.html div') , but still the blank space also gets added !
You may try this:
$(document).ready(function(e) {
// initialize dialog
var dialog1 = $("#content").dialog({
autoOpen: false
});
// load content and open dialog
dialog1.load('dialog.html #wrapper').dialog('open');
});
if u just want to load the "wrapper div" then use this $("#content").load("dialog.html #wrapper");
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>
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>