First, I open my modal using this:
$('#myModal').modal('show');
Then, in another situation, I need that this same modal does not close when pressing ESC/clicking outside, so I use this:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
But once I open my modal by the first method, the second one doesn't work. Any hints?
How can I force backdrop value switch to work?
I found a workaround for this issue.
Once the modal has been hidden bootstrap data still remains on it. To prevent that I had the following:
$('#myModal').modal('show'); //display something
//...
// if you don't want to lose the reference to previous backdrop
$('#myModal').modal('hide');
$('#myModal').data('bs.modal',null); // this clears the BS modal data
//...
// now works as you would expect
$('#myModal').modal({backdrop:'static', keyboard:false});
I had the same problem with Bootstrap 4.1.1 and it only worked when I added the data attributes to the html
<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
style="display: block;" data-keyboard="false" data-backdrop="static">
...
Similar to Daniele Piccioni but a bit more concise:
$('#myModal').modal({backdrop: true, keyboard: false, show: true});
$('#myModal').data('bs.modal').options.backdrop = 'static';
This is for Bootstrap 3.+
See also: Change Bootstrap modal option once it already exists
There are two ways to handle this:
1) You can directly add the data-attributes into the HTML -
<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
style="display: block;" data-keyboard="false" data-backdrop="static">
2) You can use JQuery (For Bootstrap V4) -
$("#myModal").data('bs.modal')._config.backdrop = 'static';
for Bootstrap V3 -
$('#myModal').data('bs.modal').options.backdrop = 'static';
I wanted to disable closing of a modal while an AJAX request was completing.
#jollyGreen got me going in the right direction, but in bootstrap 4, The only way I could do this pragmatically after the modal was already shown was like this:
$("#myModal").data('bs.modal')._config.backdrop = 'static';
That is to say that between v3 and v4 they seem to have changed the options property of the bs.modal data object to _config.
For Bootstrap 5+, data-bs-backdrop="static" html attribute should be used, this is because Bootstrap adds bs for their direct attributes on html tags.
In Angular Try:
[config]="{backdrop: 'static', keyboard: false}"
In the modal div. This solution is working 100%
Eg:
<div bsModal #dangerModal="bs-modal" [config]="{backdrop: 'static', keyboard: false}" class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Related
I have a modal that is being imported and added to a page as a component. The modal is called into the page as
<TwoFactorStatus v-show="showTwoFactoreModal"></TwoFactorStatus>
Then a button has a click event as such
<button class="btn btn-danger pull-right" #click="ShowTwoFactoreModal()" type="danger">Disable two-factor authentication</button>
Which then calls a method to
ShowTwoFactoreModal() {
this.showTwoFactoreModal = true;
}
The Modal looks like so
<template>
<div class="modal fade" id="showTwoFactoreModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
Two Factor Switch Off
</div>
<div class="modal-body">
<p>This modal must pass</p>
</div>
</div>
</div>
</div>
</template>
Change your ShowTwoFactoreModal function to something like this:
ShowTwoFactoreModal() {
this.showTwoFactoreModal = true;
$('#showTwoFactoreModal').modal('show');
}
Either that or maybe using :class bindings and appending the active class, but this is more straight. I usually do it with an eventBus, but it might be overkill for your project... if you were to do it with an event bus, you could attach an eventListener to the modal component, and attach a showModal function callback to that listener where you don't need to set IDs you can just call it like: $(this.$el).modal('show'); ... but thats another story...
Bootstrap modal is using its own js functions to handle show and hide modal. Vue v-show can only show and hide the components which you programmed its logic. But bootstrap modal is showing and hiding by appending class to modal component.
If you want to use without bootstrap.js to toggle you can use jQuery with Vue as below. (if just want show then change method .show())
//200 is duration of fade animation.
<button #click="toggleModal"></button>
function toggleModal() {
$('#your_modal_id').fadeToggle(200)
}
If you want to use bootstrap own modal with their js then you can copy and paste modal code
here. https://getbootstrap.com/docs/4.0/components/modal/
If you want Vue v-show to handle all process then write logic to do it. If need help just ask.
I have the following structure of the Worklight application page:
<body>
<div with heading/>
<div with view/>
<div with Tab bar/>
<div with simple dialog/>
</body>
When I build the app for iPad and test it on it i have the following problem.
Dialog window puts gray unclickable layer on everything except the tab bar.
Why the tab bar stays available?
Is it a bug or I'm doing wrong?
Have you tried to put the heading, tab bar and dialog in the view?
Who invoke simpleDialog? try this
<body>
<div id="home" data-dojo-type="dojox.mobile.ScrollableView"
data-dojo-props='selected:true'>
<div with heading/>
<div with simple dialog
<button data-dojo-type='dojox.mobile.Button' onClick="openDialog()">
/>
<div with Tab bar/>
</div>
</body>
for invoke simple dialog, write
function openDialog(){
WL.SimpleDialog.show("text ", "text",[{text: "buttonName", handler: function() {WL.Logger.debug("dfsdfd"); }
}]
}
);
I tried put in views in a different variations, but it still didn't work.
Than while debugging I found out that the grey cover, which should cover everything in background has a
postion: absolute;
than I override this css class with
position: fixed;
and everything became great:)
So I've seen the question asked a couple of times and eric martin answers with this:
I did the same thing on a site I'm building. I just created different content for each modal and gave each one a unique ID. So my content looked something like:
<a id='help'>HELP CONTENT</a>
<a id='about'>ABOUT CONTENT</a>
<a id='options'>OPTIONS CONTENT</a>
<div id='modal_help'>HELP CONTENT</div>
<div id='modal_about'>ABOUT CONTENT</div>
<div id='modal_options'>OPTIONS CONTENT</div>
Then in my JS, I have:
$('a').click(function (e) {
e.preventDefault();
$('#modal_' + this.id).modal({OPTIONS});
});
Hope that helps.
So, looking at the modal example demo:
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='osx-modal'>
<h3>OSX Style Modal Dialog</h3>
<p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
<p>Inspired by ModalBox, an OSX style dialog built with prototype.</p>
<input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close">x</div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
</div>
I don't understand how to call a 2nd modal box on the same page. I know this is a newbie question, but it's confusing the heck out of me.
Thanks!
It would be more helpful to have a real example (simplified) of what you are trying to do. But, going with the demo code you provided, you could do the following:
HTML:
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='osx-modal'>
<h3>OSX Style Modal Dialog</h3>
<p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
<p>Inspired by ModalBox, an OSX style dialog built with prototype.</p>
<!-- added id -->
<a href='#' id='osx-modal' class='osx'>OSX Modal</a>
<!-- new link for second modal -->
<a href='#' id='second-modal' class='osx'>Second Modal</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close">x</div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
<!-- content for second modal -->
<div id="second-modal-content">
contents of second modal
</div>
</div>
JavaScript:
$('a.osx').click(function (e) {
e.preventDefault();
$('#' + this.id + '-content').modal({OPTIONS});
});
I have expandoPane which consists of some buttons.
When I perform other operations in the project and then expand this expandoPane, its contents goes hidden and those are visble after resizing it using splitter only.
I want to solve this.
Do you have any idea why the content goes invisible?
You need to call .startup and .resize() on the content pane when it's shown.
Something like:
expandoPane.connect(this, "onClick", function() {
that.createContent();
that.startup();
that.container.resize()
});
Post your code and I'll probably be able to give you something more specific.
Adding sample code:
<div id="expandableConsole" dojoType="dojox.layout.ExpandoPane" region="bottom" showTitle='true' maxHeight="250px" maxWidth="280px" style="height:200px; width:100%;" doLayout='true' startExpanded='false' splitter="true">
<div>
<input type="button" id="btnSubmit" style="width:88px;height:20px" onclick="update()">
</div>
<div dojoType="dijit.layout.ContentPane" id="infoBar" style="height:150px">
</div>
</div>
When I expand the expandopane after few operations,button and contentpane go invisible.
i want to disable single tab in tabcontainer of dojo .
Here's my workaround for this problem:
dojo.style(dijit.byId("tabID").controlButton.domNode,{display:"none"});
and:
dojo.style(dijit.byId("tabID").controlButton.domNode,{display:"inline-block"});
For some reason, altering the disabled property, or calling setDisabled does nothing for me.
You can't do it directly since this is not a feature of the DOJO tab container. There has been a bug against DOJO, open for about 3 years, to add the feature: http://bugs.dojotoolkit.org/ticket/5601
That defect also has a potential workaround in it.
dijit.byId('tab').controlButton.domNode.disabled = true
I answered this question in another thread. Basically it involved getting jQuery involved. Works great for me. I have all the tabs created statically (as opposed to programatically) and I'm able to manipulate whether they are shown or hidden with the help on jQuery. All the code any everything is in my post here:
How do I dynamically show and hide an entire TabContainer using DOJO?
You can override its default css to make the tabbar invisible.
dojo.attr(dijit.byId('tab'), "disabled", true);
dijit.byId('tab').onClick = function () { };
You can disable tabs by setting the disabled property of the pane:
Source: https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html
pane.set("disabled", true);
Example:
<div data-dojo-type="dijit/layout/TabContainer" style="width: width: 350px; height: 200px">
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data- dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="second" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data- dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
</div>
<script type="dojo/require">
registry: "dijit/registry"
</script>
<button type=button onclick="registry.byId('second').set('disabled', !registry.byId('second').get('disabled'));">
toggle tab #2 disabled
</button>
Only problem here is that it's not visible to the user they can't click on it.
You can these additional CSS selectors:
.dijitTab.dijitDisabled {
cursor: not-allowed !important;
}
.dijitTab.dijitDisabled > .tabLabel{
cursor: not-allowed !important;
}