I am trying to create a page with different news articles(each article page directs to a different page that was created). Using modal can I create an environment where the page pop's up in the same window rather than opening in another window? If yes, can someone please help me with the code and example?
Yes, use jQuery modal dialogs. You can have a link or button for each article and when it gets clicked, open a modal dialog with the article's text.
See this JSFiddle for a working example.
<div class='article' id="article1">
<p>This is article 1, etc...</p>
</div>
<button id='article1Button'>Article 1...</button>
<div class='article' id="article2">
<p>This is another article...</p>
</div>
<button id='article2Button'>Article 2...</button>
And the javascript:
$(document).ready(function(){
$(".article").dialog({
autoOpen : false,
resizable : false,
width : 400,
height: 400,
modal : true,
buttons: {
"Close" : function(){
$( this ).dialog( "close" );
}
},
close : function(ev, ui) {
return true;
}
});
$('#article1Button').click(function(){
$("#article1").dialog("open");
})
$('#article2Button').click(function(){
$("#article2").dialog("open");
})
});
Related
Hi I would like to know if it is possible to hide html content when a popup is shown. (I am using Magnific-popup). I have a button that calls this popup to be shown. And of course, when popup is closed nav content will be displayed again.
Nav code to hide and display
<nav class="top-nav">
<ul>
<li>A link</li>
<li>A link</li>
</ul>
</nav>
button that calls popup
Call popup</span>
Popup code
<div id="register-popup" class="white-popup mfp-hide">
<div class="container">
<p>some content</p>
</div>
</div>
Thank you very very much for your help :)
Solution
You can hide the top-nav via the open callback of the Magnific plugin. You can also use the close callback to show it again.
$('#register-popup').magnificPopup({
callbacks: {
open: function() {
$('.top-nav').hide();
}
close: function() {
$('.top-nav').show();
}
}
});
Magnific-popup accepts callback on open and close events.
$('.selector').magnificPopup({
// you may add other options here, e.g.:
preloader: true,
callbacks: {
open: function() {
// Will fire when this exact popup is opened
// this - is Magnific Popup object
$('.top-nav').hide();
},
close: function() {
// Will fire when popup is closed
$('.top-nav').show();
}
// e.t.c.
}
});
For more information en Magnific-popup, checkout there API documentation:
http://dimsemenov.com/plugins/magnific-popup/documentation.html
you can use those API methodes :
$('#register-popup').magnificPopup({
// you may add other options here, e.g.:
preloader: true,
callbacks: {
open: function() {
// Will fire when this exact popup is opened
},
close: function() {
// Will fire when popup is closed
}
// e.t.c.
}
});
When the Magnific Popup is active, the class .mfp-zoom-out-cur is added to the body. If you want to hide anything use that class to target whatever you want to hide in the layout. No additional JavaScript necessary.
.mfp-zoom-out-cur .top-nav {
display:none;
visibility:hidden;
}
I want to make a POPUP div when user clicks on close window button.
At the moment i have this code:
JS:
<script type="text/javascript">
function PopIt() {
$("a#trigger").trigger('click');
window.onbeforeunload = UnPopIt;
return "Would you like to join our mailing list for other offers?";
}
function UnPopIt() { /* nothing to return */ }
$(document).ready(function() {
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'showCloseButton': false
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
<div style="display: none;">
<a id="trigger" href="#popup"> </a>
<div id="popup" style="width: 250px; height: 400px;">
<p>This would be an aweber form.</p>
</div>
</div>
It works, but not really the way I need. It popups the standard browser box with two buttons, stay or leave. I want to popup the div with id POPUP.
Please, can some one help me to fix my code?
FIDDLE
Thank you!
in web page, is it possible to open 'popup' frame as:
div or iframe or even window, so :
1. the user can see both , the pop window and the 'main' page ?
on change link in specific domain, the popped frame will remain always on top
( with additional code if needed)
the user can see both the frame and the main a
and get focus with mouse click on the popped and main
possibility to access objects/events from popped and main.
(in iframe even on different origin)
in standard desktop application, we can achieve it, as MDI forms, for example.
code sample or link will help.
Example:
$("#simple").dialog(
{
autoOpen: false,
open: function()
{
$("#withIframe").dialog( "moveToTop" );
},
focus: function( event, ui ) {
$("#withIframe").dialog( "moveToTop" );
}
});
$("#withIframe").dialog(
{
autoOpen: false,
open: function(ev, ui){
$('#if').attr('src','http://www.jQuery.com');
$(this).dialog( "moveToTop" );
}
});
$(".link").click(function() {
$("#simple").dialog('option','modal',$('#isModal').prop('checked')).dialog( "open" );
});
$(".link_iframe").click(function() {
$("#withIframe").dialog( "open" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<label><input type='checkbox' id='isModal' /> Is Modal? </label>
<a href='#' class='link'>link</a>
<a href='#' class='link_iframe'>link (iframe)</a>
<div id='simple'>
<h2>
Simple dialog
</h2>
</div>
<div id='withIframe'>
<iframe id='if' src=''></iframe>
</div>
I have my Modal Div as:
<div id="dialog-modal" title="Open File">
<img alt="progress" src="images/ajax-loader.gif"/>
</div>
On Click of Button I am able to see Modal and then see the progress icon.
<script type="text/javascript">
$(function () {
$('#button1').click(function () {
$('#dialog-modal').dialog("open");
});
$("#dialog-modal").dialog({
autoOpen: false,
height: 140,
modal: true,
});
});
</script>
But How can I do a operation or function on Load of Modal Window??
Let's say , I want to download a file from server , when the modal window appears (..showing the progress icon)
You can hook into the dialogopen function:
$( "#dialog-modal" ).on( "dialogopen", function( event, ui ) {
console.log('Wayhay!!');
window.open("http://www.google.com");
} );
See jsFiddle:
http://jsfiddle.net/3Y63f/1/
Further info here:
http://api.jqueryui.com/dialog/#event-open
I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
I'm trying to use 'this' to reference the link that the user selects dynamically.
What am I doing wrong here?
The code I'm using is below:
comment #1
comment #2
comment #3
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>
http://jsfiddle.net/qp7NP/
A couple changes: changed ID to Class and used IFrame.
comment #1<br>
comment #2<br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/
You can't have multiple elements with the same Id.
Change your links to to class="test" instead and therefore your click event to $('.test').click().
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>