Trouble with Bootstrap Modal - javascript

When I hide a modal I have to hide it like so:
$("#finishBillingModal").css("display", "none");
$(".modal-backdrop").remove();
Why?
EDIT
I have found the solution like this:
$(selector).modal({show: true, backdrop: false});
But might be this the correct way ...

Bootstrap modals are supposed to be hidden this way:
$("#finishBillingModal").modal("hide");
as per the v3 docs and the v2.3.2 docs.

Related

Magento 2 modal z-index

Is there a way to change the magento2 modal ( & modal overlay ) z-index, using their built in modal widget?
I've read all their docs and I couldn't find a nice way of doing it. But I do really need to increase the z-index...
I would rather change z-index for specific modals, but a global override of all modal widget z-index's would be OK too.
Here is the relevant part of my code ('zIndex' doesn't do anything)
Any ideas..?
var options = {
type: 'popup',
clickableOverlay: true,
zIndex: 9995
};
var modalPopup = modal(options, $('#modal_id'));
$('#modal_el').click(function() { modalPopup.openModal() });
Cheers! :)
Fixed using css!
Set a custom class on the modal and set the z-index on this
var options = {
...
modalClass: 'hi_z_index'
};
In my case editing a css class didnt resolve my issue and I find solution in adding a zIndex for modal form after init it.
So you can after it
var modalPopup = modal(options, $('#modal_id'));
add this
modalPopup.modal.zIndex(2000000001);

Unable to create a JQuery Dialog

I'm trying to get a JQuery dialog to appear and immediately got the error $(...).dialog() doesn't exist. My googling has revealed that this is usually caused by loading 2 different JQuery libraries but the only script tags in my file are for JQuery and Twitter Bootstrap. Here's my code (including my dialog code adapted from How to implement "confirmation" dialog in Jquery UI dialog?)..
<script src="jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
...
<script>
$(function(){
$("#dialog").dialog({
autoOpen: false,
modal: true
});
$(".deleteLink").click(function(e){
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Yes" : function(){
window.location.replace(targetUrl);
},
"No" : function(){
$(this).dialog("close");
}
}
});
});
});
</script>
Is there any other reason that I might be getting this error besides loading multiple libraries or does bootstrap maybe provide interference of some kind?
You are attempting to use the dialog() method and properties of jQueryUI, yet you have included the Bootstrap library. To use the Bootstrap dialog, the method is called modal().
Bootstrap Modal docs
Note that the properties are completely different. If you want to use the jQuery UI dialog() method, you would need to include the jQueryUI library, however be aware that this sometimes causes incompatibilities with Bootstrap, in both the JS and CSS.

Bootstrap Mobile Dropdown menu links not clickable

I am using the latest version of Twitter Bootstrap ( 2.3.2 ) as the framework for my site.
The only issue I have run into with Bootstraps navmenu is that when viewing the site on my phone, the dropdown links are not clickable. When you try to click the link the menu closes. Links outside of the dropdown work just fine though. I checked in my bootstrap-dropdown.js and looked for a recommended line of code I found on a GitHub discussion that is supposed to fix the issue but it was already there. What's the fix for this? I appreciate any help with this matter.
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(document)
.on('click.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);
I experienced the same issue. The submenus were not clickable on my mobile. I added the following javascript and it seems to work.
jQuery(document).ready(function($) {
$("li.dropdown a").click(function(e){
$(this).next('ul.dropdown-menu').css("display", "block");
e.stopPropagation();
});
});

Changing the text of a twitter bootstrap modal dynamically

I have a twitter bootstrap modal on a page and it works pretty well. However, sometimes I want to change its caption and body dynamically while it's being shown.
How do I do that?
function showModal(){
$("#ajaxModal").modal({keyboard: false, show: true, backdrop: 'static'});
}
function hideModal(){
$("#ajaxModal").modal('hide');
}
///.............
showModal();
//.........
hideModal();
I had worked on same scenario..here is the example may be it works for you..
This is just sample scenario.. i had find the element in the modal myModal and passed my value, i had passed dynamically 'alertMsg'
$('#myModal').find('p').html('<span style="color:#4F2817;">'+alertMsg+'</span>');

Ember Collapsible Container

I'm using Ember.js with handlebars and I need to make a div within my page collapse/expand when clicked. I know how to do this in jQuery, but I can't use any jQuery. Does anyone know how to accomplish this? Also I don't want to just toggle a hide attribute, I need the full sliding up and down feature for collapsing. If anyone has any ideas, I'd really appreciate it.
Thanks
Clicking on your view will cause a click event to be triggered. You can code your animation in any manner you want inside a click event handler in your view:
CollapsableView = Ember.View.extend({
click : function(event) {
this.$().toggle('fast');
}
})
The proper way of doing this in Ember is via the awesome Liquid Fire addon.
The outline:
Install Liquid Fire into your project.
Define a transition like this:
this.transition(
this.hasClass('transition-spoiler'),
this.toValue(true),
this.use('toDown'),
this.reverse('toUp')
);
In your controller/component, create a property spoilerIsVisible and a toggleSpoiler property:
spoilerIsVisible: false,
actions: {
toggleSpoiler: function() {
this.toggleProperty('spoilerIsVisible');
}
}
In your page/component template, create a button and a spoiler wrapper like this:
<button {{action 'toggleSpoiler'}}>
{{if spoilerIsVisible 'Show spoiler' 'Hide spoiler'}}
</button>
{{#liquid-if spoilerIsVisible class="transition-spoiler"}}
<p>Dumbledore dies</p>
{{/liquid-if}}
Note that you can wrap steps 3-4 into an x-spoiler component or something.
I do something similar, but with a tree-structure. I have written a blog post about this previously here: http://haagen-software.no/blog/post/2012-05-05-Ember_tree
It has the features you need in it, in that it adds and removed elements from the DOM when the nodes are clicked on.
A working example can be seen in an app I am currently building here: https://github.com/joachimhs/EurekaJ/tree/netty-ember/EurekaJ.View/src/main/webapp

Categories

Resources