Menu
I'm trying to achieve as the title suggests. Currently I can display the contents of a <div> using:
document.write("<table><tr>");
...
document.write("<td onclick=\"window.location.href='#popup'\" ... >" + name + "\"</td>);
With the <div> defined as: (where I'm trying to use data-name)
<div id="popup" data-name="name" class="dialog">
<a href="#close"><img src="..." alt="..." width="166" height="104" align="left" /></a>
<p>
Hello (dynamic name here)!
</p>
</div>
I have tried instead calling:
document.write("<td onclick=\"popup(" + name + ")\" class=\"programme\">" + name + "</td>");
function popup(movieName)
{
var pop = document.getElementById("popup");
pop.setAttribute("data-movie", movieName);
document.location.href = "#popup";
};
but I no longer see the popup this way.
I would eventually want to "popup" to be a modal dialogue window which will display on top of the table. Currently as it's defined above the table it just pushes the table down when displayed.
Edit: Thanks for the fantasic help. Both @carlosHT and @TimeDead. Both solutions work and both taught me a lot. I've gone for carlosHT's solution as it's a smaller implementation. The only addition I had to add was:
.ui-dialog
{
clear: both;
}
This stops the dialog window from having a very tall titlebar.
469
Here's an alternative using jQuery and jQueryUI:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
#popup{
display: none;
border: 1px solid black;
}
.cell-which-triggers-popup{
cursor: pointer;
}
.cell-which-triggers-popup:hover{
background-color: yellow;
}
</style>
</head>
<body>
<div id="popup" class="dialog">
<a href="#close"><img src="http://bit.ly/1qAuZh3" alt="..." width="166" height="104" align="left"/></a>
<p></p>
</div>
<table border="1">
<tr>
<td class="cell-which-triggers-popup">exampleName</td>
</tr>
</table>
</body>
</html>
<script>
$( document ).ready(function() {
$(document).on("click", ".cell-which-triggers-popup", function(event){
var cell_value = $(event.target).text();
showPopup(cell_value)
});
function showPopup(your_variable){
$("#popup").dialog({
width: 500,
height: 300,
open: function(){
$(this).find("p").html("Hello " + your_variable)
}
});
}
});
</script>
EXAMPLE: http://jsfiddle.net/xaqtawog/1/
166
You can achieve this also without jQuery-UI (as it did not work for me at the time though I am slowly changing over to it)
You can achieve a functioning modal with jQuery, and JS like so: (Call your css from an external file to style the modal)
Setup a function literal in a file:
(function($) {
}(jQuery)
Inside our fucntion literal we will have it build our modal (This also has JS add in the CSS which you can manually set anywhere this is for the sake of example)
setup the default parameters and execute our other builder functions:
$.fn.siteModal = function(prop) {
options = $.extend({
height: "500",
width: "500",
title: "default modal box",
description: "This is a place holder Modal to put in our things into.",
top: "20%",
left: "30%",
}, prop);
};
return(
add_block_page(),
add_popup_box(),
$('.modalBox').fadeIn()
);
return this;
};
This guy here is going to setup some default parameters that our modal is going to use so it knows what size and how to display.
Now we setup our builder functions
function add_block_page() {
var block_page = $('<div class="blockPage"></div>');
$(block_page).appendTo('body');
}
this guy here is going to create a new div that will create a lightly transparent black overlay on the webpage for our modals background and then append it to the body so it can be displayed.
Now we are going to add the popup modal itself:
function add_popup_box() {
var pop_up = $('<div class="modalBox"><a href="#" class="closeModal">X</a><div class="innerModal"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
$(pop_up).appendTo('.blockPage');
$('.closeModal').click(function() {
$('.blockPage').fadeOut().remove();
$(this).parent().fadeOut().remove();
});
}
This guy is going to create our divs for the modal (an outer and then an inner div the inner will contain our content) this also setups our X button so that when you click X the modal will close out and bring you back to the webpage correctly.
My HTML looks a little like this:
<a href="#" onclick="$.fn.siteModal(this)" class="termsLink">Terms</a>
So now when the "terms" link is clicked a new modal will open up! (this is how I call the modal for now)
This is a very basic way to do it, and once again you have to build your styles inside an external css if you'd like or you can have jquery add css as it builds this modal. The choice is yours. Hope this helps.
EDIT
I have a CSS function that creates the look for our modal box you can throw this guy in there:
function add_styles() {
/*Block page overlay*/
var pageHeight = $(document).height();
var pageWidth = $(window).width();
$('.blockPage').css({
'position': 'absolute',
'top': '0',
'left': '0',
'background-color': 'rgba(0,0,0,0.6)',
'height': pageHeight,
'width': pageWidth,
'z-index': '10'
});
$('.modalBox').css({
'position': 'absolute',
'left': options.left,
'top': options.top,
'display': 'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border': '1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius': '10px',
'-moz-border-radius': '10px',
'-webkit-border-radius': '10px',
'background': '#f2f2f2',
'z-index': '50',
});
$('.innerModal').css({
'background-color': '#fff',
'height': (options.height - 50) + 'px',
'width': (options.width - 50) + 'px',
'padding': '10px',
'margin': '15px',
'border-radius': '10px',
'color' : '#5a5a5a',
'text-align' : 'center',
'-moz-border-radius': '10px',
'-webkit-border-radius': '10px'
});
}
And put this into your calls at the prop function: add_styles()
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
