I have created a popup using the lightweight jQuery plugin: bPopup.
I want the popup to appear on page load, and as such have the following code:
<script>
;(function($) {
$(window).load(function(){ //see edit below
$('#popup').bPopup({
opacity: 0.6,
modalClose: true
});
});
})(jQuery);
</script>
the customisation modalClose: true controls weather or not the popup is closed/dismissed on clicking on the popup, or surrounding overlay (see API)
However my popup successfully appears but does not dismiss, either when clicking on overlay OR when clicking on the element with the class that controls dismissal (by default, any element with class 'b-close' will also close the popup.
Any thoughts on where I am going wrong, or how I can find out what aspect is not working? Thanks
EDIT:
As per a suggestion in comments I have altered $(window).load(function(){ to $(document).ready(function(){however my problem persists
Discovered I was using 0.7.1 version of the popup, updated to 0.9.1 and that seems to have resolved the issue. Thanks to those who took a look.
Related
I have the following form:
Whenever the user clicks on 'Don't have a Paypal account?', I want to display another form within the modal.
However, after displaying the hidden DIV and scrolling the modal, the background fade will scroll as well.
My jQuery code:
var cardForm = $('#card-form');
cardForm.hide();
$("#display-card-form").click(function (e) {
cardForm.show();
e.preventDefault();
});
If possible, upgrade from v3.3.2 to v3.3.4. This issue will be resolved.
I attempted an example first in 3.3.4, as that is what I am on. Once you specified you were on 3.3.2, I downgraded and saw your issue. This was a bug they fixed in the latest release (#15881).
Hope this helps.
We have a baffling issue whereby when we try to open a modal dialog box from a parent page it opens with 2 vertical scrollbars next to each other. One controls the modal box, the other one controls the main page behind it.
To have 2 scrollbars is not ideal and have tried to implement a solution for this.
We added some javascript in the dialog box page which would set the style to overflow:hidden when the modal dialog is open.
<script>
function myOnLoad() {
window.parent.$('body').css('overflow', 'hidden');
}
and used....
<body onload="myOnLoad()">
This works and effectively removes the scrollbar in the page behind it (i.e it does what it should) however we also want to set the overflow back to ‘auto’ when the modal dialog is closed…
We have done this by adding this code..
<script type="text/javascript">
// close Modal
$("#close").click(function () {
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});
However this does not seem to work as the modal dialog closes but the scrollbar is still hidden on the main page.
Can anyone tell me what I might be doing wrong here? I have tried different overflow properties but nothing seems to work
Ok try this, I think your page is reloading on click and thus executing your onload:
$("#close").click(function (e) {
e.preventDefault();
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});
I think that using window.parent might be the problem since this refers to the parent of the iframe wich is gone. or something like that. just use jquery
you can try by just getting the body directly $("body"), asuming you are getting that click function to fire.
edit: i see this has been mentioned above
Add style to body as
body
{
padding-right:0px !important;
overflow-y:hidden !important;
}
When my Bootstrap Modal Window is open, I have been unable to stop background scrolling from the main page. I followed the directions given in this StackOverflow question, but I have been unsuccessful so far: Prevent BODY from scrolling when a modal is opened
On the left side, near top of this page, after it loads, you will see a button that says "Large Modal". If you click it, it will open a modal window. After its open, if you scroll up and down, you will see the background moving.
http://gettinmobile.com/home.html
I have added the CSS as directed in the stackoverflow question I linked to above:
body.modal-open {
overflow: hidden;
}
I have added the javascript shown on the same stackoverflow question, though I am not sure this is done correctly:
<script type='text/javascript'>
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
</script>
Any help would be appreciated, maybe someone can see what I'm doing wrong... thanks!
You need to wait for jQuery to finish loading before you start binding events. You can do this most simply with an anonymous function:
$(function(){
// YOUR CURRENT JS CODE HERE
});
in your JS code at the bottom of page, try replacing the "$" sign with "jQuery" (no quotes), and see if that helps, it's a common happening in WordPress and quite likely the root of your problem
May I know what the name of this function or is there any references to do the function similar to the image below.
I would like to load this when the website is loaded.
I found some method is do using Modal Box but it seem to be not really proper.
Or this is the only way to do it?
Please guide me from here.
You can use jquery onload function and put the relevant code for popup window.
(https://api.jquery.com/load-event/) or you can use `window.onload=Load().
There are many popup window jquery modals - http://www.jquerybyexample.net/2013/01/jquery-popup-window-tutorial-plugins.html
I personally recommend you to use http://dinbror.dk/bpopup/ , I have tried that and it's cool.
$( window ).load(function() {
$('element_to_pop_up').bPopup();
});
Hope you got the answer :)
JQuery has it's own native Modal Popup window.
$("test").dialog({
modal: true,
height: 140
});
Should get you started.
INFO: http://jqueryui.com/dialog/#modal
In a web application that I am working on I have partial view that I display on a "details" page via a JqueryUI Dialog box. I am trying to add a JqueryUI tooltip for the close button, in the top right corner of the header, that comes stock with the dialog box. Below I have some of my code. I know the scripts will work from the location they are at currently in this web application due to my second function below. '.ui-dialog-titlebar-close' is the class that is applied to the close button in the dialog header (based off chrome firebug). The closest answer I've found to the solution was here https://forum.jquery.com/topic/tooltip-in-a-dialog-pop-up-without-hovering
Found this question similar to mine...
How to change the 'X' button in a jquery dialog box to read 'Close'
...any way I could manipulate the close button achieve what I asked like this? For example a ".addTitle()"?? About to tinker with this idea.
Any and all help or information is appreciated.
<script>
$(function() {
$('.ui-dialog-titlebar-close').tooltip({
content: function () {
return "test";
}
});
});
$(function () {
$('#testThing').tooltip();
});
</script>
With many thanks,
Rock
I would try using the create event on your dialog:
$("yourSelector").dialog({
create: function(){$(".ui-dialog-titlebar-close").attr("title","Your text goes here");}
});
This can be fixed by editing line which has
.addClass("ui-dialog-titlebar-close ui-corner-all")
in 'jquery.ui.dialog.js' or ('jquery.ui.all.js') page, It currently reads
.attr('role', 'button')
simply change it to
.attr({'role': 'button', 'title': "close (Esc)")
this will solve the issue
I think the easiest solution is to update the options configuration of jQuery UI dialog. Like:
$("#dialogConfirm").dialog({
autoOpen : false,
modal : true,
resizable : false,
dialogClass : "confirm-dialog",
closeText : "Click to Close the dialog" // Here is the Gem
});