How to remove the close icon associated with semantic modal via js code

[semanticrelated]

Hi Experts,

We have the close icon on each of the two modals we show up on the page one after the other[i.e, kind of modal chaining]. However, we do not want to show the close icon on the modal which opens along with the second modal.

We have "" available with the modal markup/html. However, we do not want to remove it from the html, but when the modal loads on the page, the close icon needs to be removed from the modal.

Is there any way we can remove
1] Using any modal properties.
2] Tried removing using it via js in the modal callback functions, but not much luck.

Any thoughts/pointers/reference code will be really helpful.

[lubber-de]

Usually the parent modal is covered with a dimmer when a child modal is shown. This should prevent clicking on the close icon on the parent modal. Does this help? Because I guess, your use case is to prevent clicking on the close icon of the parent modal?
Otherwise you can give each close icon an ID to be able to identify it and remove it (or set invisible) by the onshow event of the child modal. Of your you should make sure to re-enable this close icon again, one the child modal closes (which will make the parent modal available again)

Please share a jsfiddle with your current code so we might find out why your js approach was not working for you

[semanticrelated]

I am not quite familiar with the jsfiddle usage.. Can I post the js file I am using to load the modals here...

[lubber-de]

We need a working example, the js alone isn't enough to reproduce. It really helps us and is much faster so we don't need to guess your overall code 😉

Try the following steps for a proper jsfiddle

• Open https://jsfiddle.net/31d6y7mn which is prepared to use the latest fomantic ui version
• put your relevant modal html markup code into the top left container
• put your relevant js code in the bottom left container
• click on "Save" in the top menu. A new link is generated this is important
• share the new link

[semanticrelated]

I tried following the steps you mentioned.. But doesn't seem to work....To take this out from the application I am working on and just posting the relevant files doesn't seem to work .... Just thinking how can I go about this...

[lubber-de]

Use this as a base.
https://jsfiddle.net/lubber/v0kqrwds/15/

As you can see, the close icon of the parent is blocked when the first is opened. I also added closable:false which additionally prevents closing the modals when the dimmer is clicked.

[ko2in]

I just created from @lubber-de fiddle (https://jsfiddle.net/ko2in/Lhdzf0o1/7/). The close icon on second modal will be hidden when you open. You can remove completely base on this example if you want to.

I'm not sure it's what you're looking for. If you can't create the fiddle or sandbox to demonstrate your implementation, then we wouldn't be able to help you much.