Bootstrap Modal closing when any modal inside is closed - javascript

I am using basic bootstrap modal inside which there is a summernote text area. Problem is when I click on the insert picture button in summernote, it again opens a modal to choose the picture, but if I click on the modal close button of the summernote picture modal without choosing the picture, it closes the main modal too.
I don't want to close the main modal when modal close of the picture modal is clicked. Any help would be appreciated....

Check that these modals do not share the same id attribute
Also check that they do not share the same name attribute
you can give them separate names manually (like numbers: modal1)
you can also name them automatically with your server-side language when creating them, or with JavaScript upon load, but remember to reference these names correctly in the references, buttons & functions that close them.

#argon 's solution didn't work for me.
But I found this solution (provided here):
('#HtmlContent').summernote( {
dialogsInBody: true,
});

Related

How to make bootstrap modal with a js work on multiple websites independent from the unique styles?

for multiple websites, with unique styles I need to write a JavaScript. This script needs to create some popovers and a modal window. The popovers and modal should look an all pages the same. For the popovers I set
data-container="#myContainerID"
Then I am append to the body
<div class="my-bootstrap-iso" id="myContainerID"></div>
The class "my-bootstrap-iso" contains all bootstrap css, but processed with http://lesscss.org/. And so far it works well.
Now I wanted to do something similar with the modal. So I appended with js the class "my-bootstrap-iso" to the body when the modal opens and remove it when it closes. For some websites this works. But other websites are not adding the class "modal-open" to the body. And even if I append this class to the body when the modal opens, it doesn't work. But I don't want to write for every website a specific code for the modal.
Is it possible to make the modal window look independent from the website style? If yes, how?
Hope someone can help.

Bootstrap Modal doesnt work well

I'm trying to open a form with bootstrap modal, my first problem was that bootstrap modal disappear immediately after click on my button but searching in other questions I found the solution deleting from my template:
{!!Html::script('js/plugins/bootstrap.min.js')!!}
Now I have other problem, the form of modal open but I can not do nothing, I can not submit my form, I attached a file with photo.
It's all dark and I can not do nothing.
How can I fix this problem?
Is a problem if I deleted bootstrap.min.js ?(I'm afraid that after something goes wrong)
There other way to create modal form? (maybe javascript)
Thank you for your help!
Your modal is may be inside some other div , that is affecting it . Try putting it outside that div it will work !! Or try putting this in your css file it may work div.modal div.modal-backdrop {
z-index: 0;
}

Bootstrap multiple modal dismiss all with the last modal

How can i create multiple overlapping modal popups, and dismiss all the modals with the close button (data-dismiss) on the last modal.
Thanks in advance.
You should be able to create multiple modals, that will naturally overlap each other based on the order they were clicked in. Then, on whatever modal you want to be able to close all modals, you can use this, adjusting it to your liking:
$('.modal').modal('hide');
Stacking modals isn't supported out-of-the-box in Bootstrap, you'll need to fiddle with the JS (& possibly CSS) yourself:
Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

getting rid of lower bar in colorbox

I want to use colorbox to display a form. The form will have two buttons, one for submitting the form and one for dismissing the window created by colorbox.
I have been following the examples, particularly the so called Outside HTML (Ajax). It works, but I am trying not to show the close button and to hidden also the whole bar that colorbox uses to display the title and other button for galleries.
If I set closeButton:false, the close button is not shown but I still have some white space at the bottom that I'd like to remove.
Do you know how to achieve this?

navigate inside a jQuery modal dialog

I got a question. I'm using the jQuery modal dialog plugin to let user input some data that will be saved in a database. My dialog can actually have two states which users can choose from by selecting a radio button inside the dialog box. The problem I'm having is that I lose some of the styles on my dialog box when the user selects a radio button. Also, how do I make it so that when the user saves the input data on the dialog box, after the dialog has closed, I want to load the new data live on the current page (with without the user having to refresh the page to see the changes).
Any idea?
As suggested by the other guys, you should give us some code for your first question.
For your second question, The jQuery Modal Dialog plugin picks up a div from the DOM and converts it to the modal dialog. So all the controls which are available inside the modal dialog can be access with normal jQuery.
Also, you can assign a function to be executed when the OK or Cancel buttons are clicked inside the modal dialog. Have a look here:http://jqueryui.com/demos/dialog/#option-buttons
So what you can do is, when the "OK" button is clicked, your function will pickup all the values which are inside the controls on the modal dialog and assign them to the controls on the current page.
Hope this helps.

Categories

Resources