JQUERY or Java script popup loads table from div onclick - javascript

hey guys so i need a function that opens a popup with a table being held by a div when an image or hyperlink is clicked heres my code
<html>
<body>
<div id="tabla"> </h1> </div>
Click me
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
$( "#openDialog").on("click", function(){
$( "#tabla" ).dialog({
height: 140,
modal: true
});
$( "#tabla" ).show();
});
});
</script>
theres the DIV ID holding the table so the function must call by the ID for the popup filled with the table THANKS GUYS

Maybe you need something like this:
HTML
<button id="trigger">
open dialog
</button>
<div class="modal">
<div class="modal__body">
<table>
<tr>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
</tr>
<tr>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
</tr>
</table>
</div>
</div>
CSS
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
}
.modal__body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background: white;
}
.show {
display: block;
}
jQuery
$('#trigger').click(function() {
$('.modal').addClass('show');
});
$('.modal').click(function() {
$(this).removeClass('show');
});
Just add your table to modal__body

You can use jQuery UI dialog to achieve what you are trying to do. If you give your div containing your table a dialog class:
<div id="dialog" title="Basic dialog">
<table></table
</div>
Then you need to hook into click event of your a tag or whatever you want to trigger the popup:
$( "#openDialog" ).click(function() {
$( "#dialog" ).dialog();
});
Don't worry about closing since it has a close button on that dialog. More info here.

Related

How to overlay one div over another div (no position absolute ... )?

I need to overlay one div over another div in HTML / CSS / Javascript.
I've found this sample http://jsbin.com/kociyefoba/edit?html,css,output that works "quite" exacly as I'd like but when I try to translate it in a situation like mine (I've to use div inside a table ... ), I've some troubles.
I've tried to produce a sample code: here you're ...
<html>
<head>
<meta charset=utf-8 />
<title>test div over another div</title>
</head>
<body>
<table border=1>
<tr>
<td>
<div id="base1" style="position:relative;width:100%;height:100%;top:0px;left:0px">
<img src="https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg" />
</div>
<div id="overlay1" style="z-index:1;position:relative;width:100%;height:100%;top:50px;left:50px;color:red;">
Text Overlay
</div>
</td>
</tr>
</table>
</body>
</html>
If you use
position:absolute
in the code all works fine but note that you can't see the table borders .... I've to see them!
I've tried to use all the other option values for position but they doesn't work ....
Suggestions / examples / alternatives?
This is one way of doing it.
#overlay1 {
width: 100%;
height: 100%;
position: absolute;
color: red;
font-size: 40px;
z-index: 1;
top: 25px;
left:75px;
}
#base1 {
width: 100%;
height: 100%;
position: relative;
}
td {
position: relative;
}
<table border=1>
<tr>
<td>
<div id="overlay1">
Text Overlay
</div>
<div id="base1">
<img src="https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg" />
</div>
</td>
</tr>
</table>

How to have html popup appear over main html page?

I have been making a website-resume and I want the user to be able to click on a picture of a company I've worked for and have a description of my work experience come up. I can click on a picture and have a div pop up on top as shown here:
Any ideas on how this could be done?
you can set css to the popup div which u want to show over the html page.
Consider the following eg:
#mainPage {
width: 100%;
height: 100%
}
#popUp {
display: none;
z-index: 100;
width: 200px;
height: 50px;
background: #ADD;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="mainPage">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" width="20%" />
</div>
<div id="popUp">
<p>Hello !!! It's a popup div </p>
</div>
</body>
<script type="text/javascript">
$(function() {
$('#mainPage img').on('click', function() {
$('#popUp').show();
});
});
</script>
</html>

JQuery controlled Popup div on button click

I am trying to get a popup window which should be controlled by a jQuery function that will show/hide on the button click. My button is an asp.net control but I can't figure out how to "call" the jQuery function when the button is clicked
I have tried to add a function name to my asp.net control's onClientClick that should at least just show the popup div but that is not working. I am new to using jQuery and I believe I have everything set up correctly but I am not positive. I am also not certain whether or not I am trying to "call" the jquery function correctly.
Here is the jQuery code..
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(documnet).ready(function () {
$("#AddToCartBtn").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
$("#AddToCartBtn").click(function (e) {
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e) {
var brand = $("#brands input:radio:checked").val();
$("#output").html("<b>Your favorite mobile brand: </b>" + brand);
HideDialog();
e.preventDefault();
});
});
function ShowDialog() {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>
Heres the css..
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 380px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
and lastly the asp button control and the <div>'s
<asp:ImageButton ID="AddToCartBtn" runat="server" RowIndex='<%# Container.DisplayIndex %>'
ImageUrl="~/Pictures/ShoppingCart.png" onClientClick="ShowDialog()"
/>
<div id="output"></div>
<div id="overlay" runat="server" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Online Survey</td>
<td class="web_dialog_title align_right">
Close
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Choose your favorite mobile brand? </b>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="radio" checked="checked" value="Nokia" /> Nokia
<input id="brand2" name="brand" type="radio" value="Sony" /> Sony
<input id="brand3" name="brand" type="radio" value="Motorola" /> Motorola
</div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
So recap, I am having trouble calling my jQuery function when my asp.net button is clicked. I don't think the function is ever getting called at all because when i set breakpoints at the function it never jumps to them when testing. Any help would be greatly appreciated
ASP.NET Buttons have a dynamic generated ID, depending on its parent controls. So your Button ID isn't #AddToCardBtn. Check the generated HTML for that. As a workaround you can call out the generated ID by: <%=AddToCardBtn.ClientID%> into your jquery code to get the generated client ID of your button.
Example:
$("#<%=AddToCardBtn.ClientID%>").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
Thats the cause why your window isn't showed. The function isn't bound to your button.

Click to Delete html and javascript

I want to have two divs side by side, the first one contains a table of information the other will contain two buttons a delete and edit. The first div I want to be 100% of the screen the second will be off the screen to start with then once I click the first div with the table the second will slide out and push the first div over and show the delete and edit buttons
<div id="div1">
<table>
<tr>
<td>Some Information</td>
</tr>
</table>
</div>
<div id="div2">
<button id="delete"></button>
<button id="edit"></button>
</div>
//Javascript Code
<script>
$(document).ready(function(){
$('#div1').click(function {
//slide div2 out and push div1 to the left to show delete and edit buttons
});
});
</script>
I am trying to make it similar to the iOS mail app where you can swipe to delete but instead you will click and if you click again div1 will push div2 off the screen so basically I want to toggle the delete and edit div on and off the screen.
Not sure what javascript and css is involved in this. Thanks in advance for any answers.
You can do something like such structure the actionable elements in a div which will then be shifted around based on the state.
<div id="div2">
<div class="inner">
Fusce fermentum
</div>
<div class="actions">
<button id="delete"></button>
<button id="edit"></button>
</div>
</div>
Have #div2 be position:relatve;
#div2 {
background: #eeeeee;
padding: 20px 80px 20px 20px;
overflow: hidden;
position: relative;
}
.actions {
background: red;
position: absolute;
height: 100%;
right: -60px;
top: 0;
transition: right 0.2s ease-in-out;
width: 60px;
}
.reveal .actions {
right: 0;
}
Then just toggle the class with jQuery:
$(document).ready(function() {
$('#div2').click(function() {
$(this).toggleClass('reveal');
});
});
http://jsfiddle.net/P6gAe/1/
And this to your head
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
Add this to your script
$(document).ready(function(){
$( "button" ).click(function() {
$( "#div1" ).hide( "drop", { direction: "up" }, 500 );
});
});

Div menu next to the button

I have simple html page:
<html>
<head></head>
<body>
<table>
<tr>
<td>
<input type="image" src="http://backticket.com.ua/Img/addNew.jpg" onmouseover="ShowMenu();" onmouseout="HideMenu();" />
</td>
<td>
Some text that should be under appeared menu
</td>
</tr>
<tr>
<td colspan="2">
Some text that Some text that Some text that
</td>
</tr>
</table>
<div id="divMenu" style="display:none; width: 258px; padding: 8px 0px; border: solid 1px #CCC; background-color:White">
<div style="float: left; width: 140px; padding: 6px 2px;">
Print Page
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
Email to a Freind
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
Add to Favorites
</div>
</div>
<script type="text/javascript">
function ShowMenu() {
document.getElementById('divMenu').style.display = '';
}
function HideMenu() {
document.getElementById('divMenu').style.display = 'none';
}
</script>
</body>
</html>
I need to show a menu in hidden div next to the button (in the right side) over the other text and elements on the page. Also menu should be visible until mouseout of the button or menu, like on hover button in AddThis service.
Who can help me with javascript?
Thanks!
Put a div-tag around your table, give it the CSS style value "float: left".
Then, you give "divMenu" the CSS style value "float: right".
The rest seems to be working fine, at least in Firefox.

Categories