I have a situation in which the javascript function sets the innerHTML of <div> when mouse is clicked.I want the <div> to be loaded in to modal popup when mouse is clicked.
Here is the sample of javascript function
var map = 'show_map_codes...';
map.on('singleClick',function(evt)
{
document.getElementById('pop').innerHTML = '<iframe seamless id="info_iframe" src="some_url"></iframe>';
});
This function is on external js file.
and i have the <div> i.e.
<div id='pop'></div>
which is on aspx page.
Then how i can show the <div> contents in modal popup ...?
html Modal popup
But since it's no longer 2010, you should probably use Bootstrap: http://getbootstrap.com/javascript/#modals
Related
I've got a webpage that utilises bPopUp to pop up a modal window with jQuery.
The contents of that window are exactly what I would like to print (and nothing else on the main page).
I've tried linking a button on the popup window to run the command window.print(); but this just prints the whole page showing the popup window obscuring the rest of the page.
Does anyone know how I can only print the contents of the pop up window and nothing else?
Thanks
Sample HTMP
<div id='DivIdToPrint'>
<p>This is a Popup which needs to be printed.</p>
</div>
<div>
<p>Do not print.</p>
</div>
<input type='button' id='btn' value='Print' onclick='printDiv();'>
Javascript
function printDiv()
{
var divToPrint=document.getElementById('DivIdToPrint');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Give an ID to your Popup div and use above example.
You need to give inline styling to print the popup exactly.
I am having a webpage load another webpage inside an iframe that takes up the entire screen. I have 2 div's that are on top of each other. These divs are actually anchors that direct to a new url (an action). What I am trying to do is once any of the divs is clicked, to initiate an onclick event that will go to the url specified in that anchor href, and then reload the initial index.html page. My class is working on a local enviroment to teach us a thing called clickjacking. Below is my current html.
The issue im having is I can have the anchor click go to the url I want, but then I am no longer in my index.html. Is it possible to open the referenced link in a new window, close the new window once its loaded and then refresh the index.html page. Once that is done to hide the div that was clicked since the "second" div is hidden behind the top most clickable div.
<html>
<head>
</head>
<body>
<center>
<!-- Two anchor divs that are clickable and on top of each other -->
<div id="secondDiv">
<a href="http://www.2ndURL.com" id="m2">
<div id="2" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
</div>
<div id="firstDiv">
<a href="#" id="m1" onclick="myFunction(); return false;">
<div id="1" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
<!-- Main iFrame where user interacts -->
</div>
<iframe id="new" src="http://www.mywebpage.com" style="opacity:1.0;width:100%;height:100%;">
</iframe>
</center>
</body>
<script>
function myFunction(){
var newWindow = window.open("http://www.actionURL");
newWindow.close()
var myWindow = window.open("file:///home/seed/Desktop/index.html", "_self");
}
</script>
</script>
</html>
TLDR:
Load iframe in webpage
click on anchor div on page that directs to a new url
load that url, once loaded go back to the index.html (all in one tab) (step 1)
hide the anchor div that was selected-- allowing second anchor to be
clicked
Thank you for your help.
It looks like you might need to "fake" the onclick if you want to have an onclick action work on the page you are on. You will need to modify the parameters, but here is a code that I have used:
$(function() {
// find out what our query parameters contain.
var query = location.search;
// isolate the position of the equal sign.
var equalIndex = query.indexOf('=');
// extract the image's id.
var imageId = query.substring(equalIndex + 1);
// click on the appropriate image.
$('#' + imageId).click();
});
The comments explain what each step of the code performs. In my case, I needed the page to load and then force the onclick using the unique image ids. In your case, you will need to tie it to your unique div. I hope that this helps you get started.
I have this situation that i need to trigger click on some element from clicking other element. More concretly - i have gallery with thumbnails. When you hover over the thumbnail - the description box covers the whole thumbnail. After that i need to trigger click event on the thumbnail so it can run lightbox. To achieve this i need to do something when i click on the description.
This is the html:
<div id="gallery">
<!-- Content from handlebars that is loaded dynamicaly from template file via ajax -->
<a class="lightbox lightbox-frame" href="img/gallery/{{filename}}.jpg" data-lightbox="gallery" data-category="{{category}}">
<img src="img/gallery/thumbs/{{filename}}.jpg" alt=""/>
</a>
<p class="gallery-image-description">{{description}}</p>
<!-- Content from handlebars -->
</div>
I am trying this but it does not work. It works for statick content but this content is loaded via Ajax and then compiled with Handlebars:
('#gallery').on('click', '.gallery-image-description', function () {
$(this).prev().click();
});
So the question is: Do you have any idea how i can trigger click event on dynamicaly generated content, by clicking on other element ?
I'm not sure this will help because I've never used lightbox, and I can't be sure that there isn't an interaction between lightbox and the JS.
But here is a FIDDLE that
Has a dynamically generated div/image
On hover, covers the image with text
A click on the parent pops up an alert
JS
$('.imagestuff').on('click', function(){
alert('clicked');
});
I am using following page to redirect the next page when success current page.
How to show the pop up when load the new page and click the ok pbutton it will move to next page.
How to achieve this?
<script type="text/javascript">
$(document).ready(function () { //or $(window).load(function(){
$('#myModal').reveal($(this).data());
});
</script>
<div id="myModal" class="reveal-modal">
<h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
<inputbutton name=ok value="www.mpage.com" />
</div>
Don't pass anything into the reveal method. Reveal method for Zurb Reveal (which it looks like that's what you're using) accepts only options specified here: http://zurb.com/playground/reveal-modal-plugin
$('#myModal').reveal();
Assuming that you have your myModal on your page and you're loading the reveal plugin before your script there, it should work.
i use dialog box without dialog ui for show erorr event in web page
<div id="downloadcredit" style="width:100%;position:fixed;height:100%;min-height:overflow:hidden;background-color:rgba(127,127,127,0.4);display:none;" >
<div style="text-align:right;width:466px;position:absolute;left:0;right:0;height:337px;min-height:overflow:hidden;background:url(images/creditbase.png);color:black;margin-left:auto;margin-right:auto;top:200px;font:16px behzad;">
<div style="width:100%;height:40px;background:transparent;font:20px behzad;padding-top:8px;color:#818181;text-align:center;"><span style="float:right;font:12px tahoma;font-weight:bold;color:#75797A;margin-right:15px;cursor:pointer;margin-top:6px;" onclick="$('#downloadcredit').slideUp('slow');">X</span></div>
<div style="margin:175px auto 10px;width:95%;font:11px tahoma;text-align:center;color:white;line-height:165%;">
<p> Erorr Sample ...
</div>
</div>
</div>
<body onload="$('#downloadcredit').slideDown('1000');">
but my page is Slow loading and 3 or 4 second after page complete loaded dialog show :( .
any way for show dialog first and page load in background?
I usualy apply the style "display:none" to the target container, then you can use the .load() function and use the callback to show your container filled with data.
Basically :
$('#target').hide();
$('#target').addClass("loading-layer");
$('#target').load('toto.php',function(){
$('#target').removeClass("loading-layer");
$('#target').show();
});