I have a View/Edit button in my angular application which shows the details of user in a modal when clicked In modal it has Save and delete buttons. When they click on delete button the user will be deleted. Before they delete, I want to show a delete confirmation.
So, I'm showing the delete confirmation modal inside the first modal.
Now, I want to dismiss the two modals when they click on final delete button. I tried using
data-dismiss= "modal" so that the modal closes automatically, but this is closing only the second modal which is above the first modal. How would I close both modals at a time?
And also I feel that this is not a good idea to have 2 modals like this. Is there any alternative to this?
Thanks!
Please let me know if any code or more information is needed
Related
I'm trying to have it so that I can go directly from one modal to another without flicker/animations for bootstrap Modals in react (using react-bootstrap), but it doesn't work because of the fade CSS class.
I'd like to set it so that the first modal a user opens animates, and the last one a user closes animates. So say I have 3 modals the user goes between:
1 => 2 => 3
Modal 1: fades in on open, no animation on close
Modal 2: no animation at all
Modal 3: no animation on open, fades out on close
How should I go about doing this? I've tried tinkering with the fade CSS class to no avail.
This feels like an anti-pattern, so maybe I don't really want to do this. What I'm trying to do is cleanly go from a Registration modal to an Account Setup modal, with it being seamless for the user.
Just reuse the same Modal component: on submit of the first and second form change the content via props and on the last form submit call the close modal method.
I'm creating several accordions headers and bodies from a vuejs data object.
The header is a button that triggers the body content and contains several datas and 2 nested buttons.
1st one to delete current header and its body from the DOM
2nd one to edit the body.
Second button is supposed to open a modal but for some reason when i click on this modal button, it triggers the accordion's collapse and modal at the same time creating a visual bug.
How can I trigger a nested button without triggering the main button?
I would have to see your code to tell your for sure, but it sounds like you can just use a different on click event for the second button?
I am new to bootstrap and AngularJs.
I am trying to use bootstrap modal dialog box to display additional details in a column of a table. I want the bootstrap modal to popup from where the details button in every row is but I can't seem to change the default position of the modal. It always pops up at the top and not where the mouse was clicked. Is there any way to re position it so that it pops up from right where the button is so that it looks more relevant to a particular element and less like an alert box.
Thanks.
use tooltip with html template and you can change the trigger to click so it will resolve your problem
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,
});
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.