I am trying to create a popup to show zoomed text .In the modal popup even if i close the box , on clicking back button in my browser the modal is getting displayed again. Is there any way to permanently close the box ??? Below is my code.. TIA :)
Zoom Text
<div id="openModal" class="modalDialog">
<div>
X
<p class="test">Test</p>
<br>
Close
</div>
</div>
Clicking the "Back" browser button triggers displaying page(s ) from history of browsing. You can ensure that when this action takes place, your modal will be forcibly closed by executing some sort of changing display mode of the div with JavaScript and usage of hashchange event. Something like this code snippet:
if ("onhashchange" in window) {
window.addEventListener("hashchange", function(){
// .... Location changed, so do your thing here...
document.getElementById("openModal").style.display = "none";
})
};
Related
I am developing web application in Angular 2. On button click I am trying to open popup. I am able to do it in JavaScript. I am trying now in Angular 2.
Below is my HTML code for popup inside main page.
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
In main page I have one text box. When I open popup inside popup text box is also displaying as below.
Filter records text box is in html page and not in popup. Can someone help me to fix this issue? Thank you.
It sounds like you've applied a high z-index to the filter records textbox and button; z-index is a styling attribute that allows you to specify which things appear in front of others, by lowering the z-index on your "Filter records" textbox/button they should sit behind the popup.
Read more on z-index here: https://www.w3schools.com/cssref/pr_pos_z-index.asp
I am trying to display a expand button on my wordpress site. I currently have:
[expand title="<img src='http://homeofdrone.com/wp-content/uploads/2016/11/Read-More-Button.png' />" tag="div" alt="continue button" notitle="true" trigclass="my_center_class"][/expand]
This creates the button and centers it, GREAT! However it still displays the arrow on the left hand side, and the button remains. How do I make it so the arrow on the left isn't showing, AND when the button is clicked and the content is expanded, to hide the button so the content is there until the page is reloaded :)
I have a button that I want to open the mdl-layout__drawer. For example, see the official example here and note the menu icon opens the drawer upon clicking.
I have a button that, upon clicking, I want the drawer to open. I have tried both of the jQuery selectors below with the jQuery.click() method. Neither works - only a screen flicker. Any ideas?
$(".mdl-layout__drawer-button").click();
$(".material-icons:contains('menu')").click();
Make sure your code is inside $(document).on('pageinit') and you are using the correct selector to detect the button click like in the example below:
$(document).on('pageinit', function() {
$("#idOfTheButton").click(function() {
$(".mdl-layout__drawer-button").click();
});
});
No need to click the menu button, toggle sidenav visibility with material API
document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
Is there way to open pop up Iframe lightbox on hover of any div.
If any of you guys knows such examples can you please post the link here
Thank you
Using colorbox, a jquery Lightbox alternative. Very simply you, can use an anchor element :
<a class="youtube cboxElement" href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a>
Check the Demos
If you want the popup to appear on hover, I think you will have to customize it on your own, by adding an event listener to the hoverable element :
$('#hoverableElement').hover(
function(){
$('#hoverableElement').colorbox();
} ,
function(){
$.colorbox.close();
}
);
where the element you want to trigger the popup will have the ID "hoverableElement".
I have an audio clip that plays through once and then the 'Play' button is disabled so that it can't be played again. The only problem is the scrollbar is clickable so that the user can go back to the beginning or forwards which is not the desired process as they should only be able to play it once.
Is there a way of preventing a user from clicking on the blue progress bar as per the image below?
Thanks
There is a div on top of the progressbar with the the class "jp-seek-bar".
It is this div which makes the progressbar scrollable.
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
So you simply need to remove this div. The progress itself will still be visible.
<div class="jp-progress">
<div class="jp-play-bar"></div>
</div>
Another solution is to unbind the event-listener binded to the jp-seek-bar div.