how can i keep a modal from closing when there is a data-dismiss='modal' on the main container and when a button is pressed to expand panels inside

Question

so the main modal content starts here:

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container" data-dismiss="modal">

and the panel is inside the above container which then sets off the data-dismiss:

<div class="panel-group">
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" href="#collapse1">Collapsable Panel Title</a>
    </h4>
  </div>

I want to be able to stop the data-dismiss from firing if I open up one of the panels.

https://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing — AntonZlatkov, Jun 12 '17 at 16:33

kblau · Answer 1 · 2017-06-13T20:07:35.187

UPDATED! Here is how you do it. I will create a fiddle.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2005</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function (event) {
                $("#portfolioModal1").addClass("collapse in");
                event.stopPropagation();
            })

            $("#portfolioModal1").click(function (event) {
                if (event.target.id == "portfolioModal1") {
                    $("#portfolioModal1").removeClass("collapse in");
                }
            });
        })
    </script>
</head>
<body>
    <button style="margin-bottom: 20px;" class="btn  btn-default" data-toggle="modal"
            data-target="#portfolioModal1">
        Click Me
    </button>
    Click anywhere outside the MODAL to close - standard behavior of rmoving a modal is by adding a button to modal or click outside of MODAL
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container" data-dismiss="modal">
                <a id="PanelOpener" data-toggle="collapse" href="#collapse1" data-target="#showHide" />
                Click to hide/show panel<a />
                <div id="showHide" class="panel-group collapse">
                    <div class="panel panel-primary" style="width:200px">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                A Heading
                            </h4>
                            More content..
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

thank you very much for doing that for me was trying for ages without avail. the popup was working as the div below what I mentioned had an id="collapse1" — AtikP, Jun 13 '17 at 08:13
i have just tried out this function and unfortunately this is also not what i was trying to achieve. This function stops everything from dismissing the modal. I however need a solution that stops the modal from closing ONLY if the popup tab is pressed AND if the rest of the modal is pressed it should close. — AtikP, Jun 13 '17 at 08:29
another thing your solution did is not allow the panel to open and show its contents. is there a way to allow for it to happen before propagation stop event. — AtikP, Jun 13 '17 at 09:39
I just checked it out and realised what you've done. This still doesn't help my cause as I wanted for the MODAL area to be clicked to close as it is a FULLSCREEN modal there is no area outside of the modal that is clickable. thank you for trying though. Appreciate it. — AtikP, Jun 14 '17 at 09:04

how can i keep a modal from closing when there is a data-dismiss='modal' on the main container and when a button is pressed to expand panels inside

1 Answers1