Rectangle 27 4

This is the old way you or you can say conventional way you are doing this. Still it has the answers. just bind hide and click eventds outside the show event bind.

$('#exampleModal').on('show.bs.modal', function(event) {

   var button = $(event.relatedTarget) // Button that triggered the modal
   var recipient = button.data('whatever') // Extract info from data-* attributes
     // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
     // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
   var modal = $(this)
   modal.find('.modal-title').text('New message to ' + recipient)
   modal.find('.modal-body input').val(recipient)

   

 })
 
 $("#btnsend").on("click", function() {
     console.log('Pinchado')
     console.log(recipient)
   })

   $("#btnclose").on("click", function() {
     console.log('Cerrando...')
   })

   $('#exampleModal').on('hidden.bs.modal', function(e) {
     console.log('Cerrada');
   })

Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.

function open_modal(name) {

  var message = $('#frm_1');
  BootstrapDialog.show({
    title: 'New message to ' + name,
    message: $('#frm_1'),
    onshown : function() {
      $('#recipient-name').val(name);
    },
    onhide : function(dialog) {
      $('#hidden-div').append(message);
    },
    buttons: [{
      label: 'Close',
      action: function(dialog) {
        dialog.close();
      }
    }, {
      label: 'Send message',
      cssClass: 'btn btn-primary',
      action: function(dialog) {
        // Do whatever send message does, here
      }
    }]
  });



}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

<button type="button" class="btn btn-primary" onclick="open_modal('@mdo')">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" onclick="open_modal('@fat')">Open modal for @fat</button>
<button type="button" class="btn btn-primary" onclick="open_modal('@getbootstrap')">Open modal for @getbootstrap</button>



<div id="hidden-div" style="display : none">

  <form id="frm_1">
    <div class="form-group">
      <label for="recipient-name" class="control-label">Recipient:</label>
      <input type="text" class="form-control" id="recipient-name">
    </div>
    <div class="form-group">
      <label for="message-text" class="control-label">Message:</label>
      <textarea class="form-control" id="message-text"></textarea>
    </div>
  </form>


</div>

jquery - Bootstrap modal close button - Stack Overflow

jquery twitter-bootstrap bootstrap-modal
Rectangle 27 1

$('#myModal').trigger('click.dismiss.bs.modal')

jquery - Bootstrap modal close button - Stack Overflow

jquery twitter-bootstrap bootstrap-modal
Rectangle 27 56

let Modal = React.createClass({
    componentDidMount(){
        $(this.getDOMNode()).modal('show');
        $(this.getDOMNode()).on('hidden.bs.modal', this.props.handleHideModal);
    },
    render(){
        return (
          <div className="modal fade">
            <div className="modal-dialog">
              <div className="modal-content">
                <div className="modal-header">
                  <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 className="modal-title">Modal title</h4>
                </div>
                <div className="modal-body">
                  <p>One fine body&hellip;</p>
                </div>
                <div className="modal-footer">
                  <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" className="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>
        )
    },
    propTypes:{
        handleHideModal: React.PropTypes.func.isRequired
    }
});



let App = React.createClass({
    getInitialState(){
        return {view: {showModal: false}}
    },
    handleHideModal(){
        this.setState({view: {showModal: false}})
    },
    handleShowModal(){
        this.setState({view: {showModal: true}})
    },
    render(){
    return(
        <div className="row">
            <button className="btn btn-default btn-block" onClick={this.handleShowModal}>Open Modal</button>
            {this.state.view.showModal ? <Modal handleHideModal={this.handleHideModal}/> : null}
        </div>
    );
  }
});

React.render(
   <App />,
    document.getElementById('container')
);

The main idea is to only render the Modal component into the React DOM when it is to be shown (in the App components render function). I keep some 'view' state that indicates whether the Modal is currently shown or not.

The 'componentDidMount' and 'componentWillUnmount' callbacks either hide or show the modal (once it is rendered into the React DOM) via Bootstrap javascript functions.

I think this solution nicely follows the React ethos but suggestions are welcome!

on('hidden.bs.modal', this.props.handleHideModal);

@happy.cze yes I found this also! Otherwise you end up with 2 modal back drops when you close then re-open the modal. Thanks!

Had to replace $(this.getDOMNode()) with $(ReactDOM.findDOMNode(this)) to make it work. Probably not the correct approach to show a modal, but worked for me.

According to stackoverflow.com/questions/10636667/, If the modal container has a fixed or relative or absolute position, or is within an element with fixed/relative/absolute position, then the modal will appear under background. Unfortunately, in this solution, the modal container is embedded inside react component, which means the modal-appear-under-background problem will happen once the react component is rendered inside fixed/relative/absolute DOM element. I met this problem a few hours ago and came up to a new solution. Will post it later.

javascript - Bootstrap modal in React.js - Stack Overflow

javascript twitter-bootstrap crud reactjs
Rectangle 27 56

let Modal = React.createClass({
    componentDidMount(){
        $(this.getDOMNode()).modal('show');
        $(this.getDOMNode()).on('hidden.bs.modal', this.props.handleHideModal);
    },
    render(){
        return (
          <div className="modal fade">
            <div className="modal-dialog">
              <div className="modal-content">
                <div className="modal-header">
                  <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 className="modal-title">Modal title</h4>
                </div>
                <div className="modal-body">
                  <p>One fine body&hellip;</p>
                </div>
                <div className="modal-footer">
                  <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" className="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>
        )
    },
    propTypes:{
        handleHideModal: React.PropTypes.func.isRequired
    }
});



let App = React.createClass({
    getInitialState(){
        return {view: {showModal: false}}
    },
    handleHideModal(){
        this.setState({view: {showModal: false}})
    },
    handleShowModal(){
        this.setState({view: {showModal: true}})
    },
    render(){
    return(
        <div className="row">
            <button className="btn btn-default btn-block" onClick={this.handleShowModal}>Open Modal</button>
            {this.state.view.showModal ? <Modal handleHideModal={this.handleHideModal}/> : null}
        </div>
    );
  }
});

React.render(
   <App />,
    document.getElementById('container')
);

The main idea is to only render the Modal component into the React DOM when it is to be shown (in the App components render function). I keep some 'view' state that indicates whether the Modal is currently shown or not.

The 'componentDidMount' and 'componentWillUnmount' callbacks either hide or show the modal (once it is rendered into the React DOM) via Bootstrap javascript functions.

I think this solution nicely follows the React ethos but suggestions are welcome!

on('hidden.bs.modal', this.props.handleHideModal);

@happy.cze yes I found this also! Otherwise you end up with 2 modal back drops when you close then re-open the modal. Thanks!

Had to replace $(this.getDOMNode()) with $(ReactDOM.findDOMNode(this)) to make it work. Probably not the correct approach to show a modal, but worked for me.

According to stackoverflow.com/questions/10636667/, If the modal container has a fixed or relative or absolute position, or is within an element with fixed/relative/absolute position, then the modal will appear under background. Unfortunately, in this solution, the modal container is embedded inside react component, which means the modal-appear-under-background problem will happen once the react component is rendered inside fixed/relative/absolute DOM element. I met this problem a few hours ago and came up to a new solution. Will post it later.

javascript - Bootstrap modal in React.js - Stack Overflow

javascript twitter-bootstrap crud reactjs
Rectangle 27 51

<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

This worked. Simple. Not sure what I was doing wrong. I just ripped everything out and started fresh with this. Thanks!

I'm having a problem with the modal too, and I'm cropping right from the demo on the website. Press the "Launch dmeo modal link in the title bar. jsfiddle.net/RMgZV/2

@andyczerwonka copy the html of your modal to somewhere not inside the navbar. See: jsfiddle.net/kcS2N/1

Bootstrap 3.0 Modal - Stack Overflow

twitter-bootstrap modal-dialog twitter-bootstrap-3
Rectangle 27 18

<span class="button" , data-dismiss="modal" aria-label="Close">cancel</span>

jquery - Close Bootstrap Modal - Stack Overflow

jquery twitter-bootstrap modal-dialog
Rectangle 27 3

$(function(){
  $("#example")
      .popover({
      title : 'tile',
      content : 'test'
    })
    .on('shown', function(e){
      var popover =  $(this).data('popover'),
        $tip = popover.tip();

      var close = $('<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>')
        .click(function(){
          popover.hide();
        });
      $('.popover-title', $tip).append(close);
    });
});

Rather than adding the button as a string of markup, it's much easier if you have a jQuery wrapped button because then you can bind much more neatly. This is indeed sadly missing from the Bootstrap code, but this workaround works for me, and actually could be expanded to apply to all popovers if desired.

jquery - How to insert close button in popover for bootstrap - Stack O...

jquery twitter-bootstrap popover
Rectangle 27 1

in your script template add

<div class="modal-header">
<button type="button" class="close" data-dismiss="dialog" data-ng-
click="cancel($event)">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
 </button>
 <h4>Title</h4>
 </div>

This is the solution I am using now, but I need to understand why the template solution is not working?

maybe its a bug for ui-bootstrap library, the problem its the function close in the windowTemplate, it doesnt fire.

angularjs - Add close button to Angular UI bootstrap modal window temp...

angularjs modal-dialog angular-ui-bootstrap
Rectangle 27 9

There is an easier way to do it. This bootstrap pull request explains a little more. The solution disables all methods for closing the modal (keyboard, mouse click, close button).

All you have to do to disable closing the modal is:

$('#myModal').data('bs.modal').isShown = true;

Here is some sample code that works in conjunction with a jQuery get:

// disable closing the modal
$('#myModal').data('bs.modal').isShown = false;

// Send an HTTP GET request to the server - replace this with getJSON, post or ajax as needed
$.get( "ajax/test.html", function( data ) {
  // enable closing the modal
  $('#myModal').data('bs.modal').isShown = true;

  // Do something with the data
  $( ".result" ).html( data );
});

javascript - Twitter Bootstrap / jQuery - How to temporarily prevent t...

javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-2
Rectangle 27 54

angular.module('yourModuleName').service('modalService', ['$modal',
// NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modal
function ($modal) {

    var modalDefaults = {
        backdrop: true,
        keyboard: true,
        modalFade: true,
        templateUrl: '/app/partials/modal.html'
    };

    var modalOptions = {
        closeButtonText: 'Close',
        actionButtonText: 'OK',
        headerText: 'Proceed?',
        bodyText: 'Perform this action?'
    };

    this.showModal = function (customModalDefaults, customModalOptions) {
        if (!customModalDefaults) customModalDefaults = {};
        customModalDefaults.backdrop = 'static';
        return this.show(customModalDefaults, customModalOptions);
    };

    this.show = function (customModalDefaults, customModalOptions) {
        //Create temp objects to work with since we're in a singleton service
        var tempModalDefaults = {};
        var tempModalOptions = {};

        //Map angular-ui modal custom defaults to modal defaults defined in service
        angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

        //Map modal.html $scope custom properties to defaults defined in service
        angular.extend(tempModalOptions, modalOptions, customModalOptions);

        if (!tempModalDefaults.controller) {
            tempModalDefaults.controller = function ($scope, $modalInstance) {
                $scope.modalOptions = tempModalOptions;
                $scope.modalOptions.ok = function (result) {
                    $modalInstance.close(result);
                };
                $scope.modalOptions.close = function (result) {
                    $modalInstance.dismiss('cancel');
                };
            };
        }

        return $modal.open(tempModalDefaults).result;
    };

}]);
<div class="modal-header">
  <h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
  <p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn" 
          data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
  <button class="btn btn-primary" 
          data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
</div>

once this is done... you just have to inject above service whereever you want to create a dialog box, example below

$scope.deleteCustomer = function () {

    var custName = $scope.customer.firstName + ' ' + $scope.customer.lastName;


    var modalOptions = {
        closeButtonText: 'Cancel',
        actionButtonText: 'Delete Customer',
        headerText: 'Delete ' + custName + '?',
        bodyText: 'Are you sure you want to delete this customer?'
    };

    modalService.showModal({}, modalOptions)
        .then(function (result) {
             //your-custom-logic
        });
}

This looks like an elegant way of using dialogs globally. Will wait for other answers before accepting your answer by the time I give a go for this. Thanks!

I am using this approach in my application at the moment. Also, appreciate the link for Dan Wahlin's blog post. Marking your suggestion as the answer.

How can you close this modal from code? I mean automatically when some proccess finished. Trigger on close button doesn't work. Any idea?

To be able to use this modal, one has to do the following: 1. Load ui-bootstrap-0.14.3.js (or the appropriate file version) in index.html 2. Declare ui.bootstrap as a dependency for the app, like so: angular.module('testApp', ['ui.bootstrap']);. If including latest version, in the above code for the Modal Service, replace $modal with $uibModal and replace $modalInstance with $uibModalInstance.

angularjs - Create a simple Bootstrap Yes/No confirmation or just noti...

angularjs angular-ui-bootstrap bootstrap-modal
Rectangle 27 1

I had the same problem in the iphone or desktop, didnt manage to close the dialog when pressing the close button.

i found out that The <button> tag defines a clickable button and is needed to specify the type attribute for a element as follow:

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

check the example code for bootstrap modals at : BootStrap javascript Page

How to get twitter bootstrap modal to close (after initial launch) - S...

twitter-bootstrap modal-dialog
Rectangle 27 175

Another possibility is that you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

This one pointed out the solution to me: Load first bootstrap and then jqueryUI. Cheers.

Lovely - note that when including jQuery, Bootstrap and jQuery UI, you need to include them in that order (jQuery 1st, Bootstrap 2nd, UI 3rd)

The answer can mess up some of bootstrap's functionality though - so if you're in a bind - try a little hack with css for the button class: .ui-dialog-titlebar-close:after { content: 'X'; font-weight:bold; }

You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine!

jquery - jQueryUI modal dialog does not show close button (x) - Stack ...

jquery asp.net-mvc-3 jquery-ui dialog
Rectangle 27 5

For those using Angular JS and the UI Bootstrap. Here is what it took for me to get it to work. My situation was a bit different. I had a Modal that worked and scrolled great. I then had a button on that modal that would pop another modal. Once that second modal was closed, the initial modal would no longer scroll. This is all it took:

.modal.in {
  overflow-x: hidden;
  overflow-y: auto;
}

angularjs - How to prevent scrolling of the body content when bootstra...

angularjs twitter-bootstrap angular-ui
Rectangle 27 1

$(function(){ // let all dom elements are loaded
  $("#details").on("show.bs.modal", function (e) {
      alert("event fired");
  });
  
  $('button').click(function(){
  	$('#details').modal({show: true});
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button>
Open Modal
</button>

<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal"></button>
            <h4 class="modal-title"></h4>
            </div>
                <div class="modal-body">
            <p id="modal-body" class="text-defualt text- text-normal text-left"></p>
        </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>
bootstrap.min.js

javascript - Bootstrap modal event doesn't trigger - Stack Overflow

javascript jquery twitter-bootstrap bootstrap-modal
Rectangle 27 8

I suffered a similar issue: in my modal window, I have two buttons, "Cancel" and "OK". Originally, both buttons would close the modal window by invoking $('#myModal').modal('hide') (with "OK" previously executing some code) and the scenario would be the following:

  • Do some operations, then click on "OK" do validate them and close the modal
  • Open the modal again and dismiss by clicking on "Cancel"
  • Re-open the modal, click again on "Cancel" ==> the backdrop is no longer accessible!

well, my fellow next desk saved my day: instead of invoking $('#myModal').modal('hide'), give your buttons the attribute data-dismiss="modal" and add a "click" event to your "Submit" button. In my problem, the HTML (well, TWIG) code for the button is:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>
$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

while no "click" event is attributed to the "Cancel" button. The modal now closes properly and lets me play again with the "normal" page. It actually seems that the data-dismiss="modal" should be the only way to indicate that a button (or whatever DOM element) should close a Bootstrap modal. The .modal('hide') method seems to behave in a not quite controllable way.

Same here, what if you don't want to trigger the modal from a button?

Twitter bootstrap modal-backdrop doesn't disappear - Stack Overflow

twitter-bootstrap modal-dialog
Rectangle 27 8

I suffered a similar issue: in my modal window, I have two buttons, "Cancel" and "OK". Originally, both buttons would close the modal window by invoking $('#myModal').modal('hide') (with "OK" previously executing some code) and the scenario would be the following:

  • Do some operations, then click on "OK" do validate them and close the modal
  • Open the modal again and dismiss by clicking on "Cancel"
  • Re-open the modal, click again on "Cancel" ==> the backdrop is no longer accessible!

well, my fellow next desk saved my day: instead of invoking $('#myModal').modal('hide'), give your buttons the attribute data-dismiss="modal" and add a "click" event to your "Submit" button. In my problem, the HTML (well, TWIG) code for the button is:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>
$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

while no "click" event is attributed to the "Cancel" button. The modal now closes properly and lets me play again with the "normal" page. It actually seems that the data-dismiss="modal" should be the only way to indicate that a button (or whatever DOM element) should close a Bootstrap modal. The .modal('hide') method seems to behave in a not quite controllable way.

Same here, what if you don't want to trigger the modal from a button?

Twitter bootstrap modal-backdrop doesn't disappear - Stack Overflow

twitter-bootstrap modal-dialog
Rectangle 27 166

multiple modals on top of each other

@Component({
  selector: 'app-component',
  template: `
  <button type="button" (click)="modal.show()">test</button>
  <app-modal #modal>
    <div class="app-modal-header">
      header
    </div>
    <div class="app-modal-body">
      Whatever content you like, form fields, anything
    </div>
    <div class="app-modal-footer">
      <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </app-modal>
  `
})
export class AppComponent {
}

@Component({
  selector: 'app-modal',
  template: `
  <div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `
})
export class ModalComponent {

  public visible = false;
  public visibleAnimate = false;

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }
}

To show the backdrop, you'll need something like this CSS:

.modal {
  background: rgba(0,0,0,0.6);
}
onContainerClicked()
[ngClass]="{'in': visibleAnimate}"
[ngClass]="{'show': visibleAnimate}"

very good, neat and clean solution.

@doorman: No problem :) I've updated my answer - you just need to add some styling to show the backdrop. As for the jQuery error, you don't need the bootstrap.js file here (this works without any bootstrap javascript file). Hope I'm understanding you correctly

@Mickey Sly, glad it's kinda working for you. Seems you have found a solution, but (for what its worth) what I would probably do (which may be more Angular) is have a currentItem variable in the component and when you click on a list item, you update that variable to show the selected list items data. The modal will bind to that variable. At the last second, display the dialog. But yes the ViewChildren documentation is pretty bad. I always find myself referring back to this same blogpost blog.mgechev.com/2016/01/23/

The (click)="hide()" on the outer DIV was closing the modal whenever I clicked anywhere in the content (e.g., into a textbox). I fixed this with <div class="modal-content" (click)="$event.stopPropagation();">

document.body.className += ' modal-open';
document.body.className = document.body.className.replace('modal-open', '');

Angular 2.0 and Modal Dialog - Stack Overflow

modal-dialog angular
Rectangle 27 154

multiple modals on top of each other

@Component({
  selector: 'app-component',
  template: `
  <button type="button" (click)="modal.show()">test</button>
  <app-modal #modal>
    <div class="app-modal-header">
      header
    </div>
    <div class="app-modal-body">
      Whatever content you like, form fields, anything
    </div>
    <div class="app-modal-footer">
      <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </app-modal>
  `
})
export class AppComponent {
}

@Component({
  selector: 'app-modal',
  template: `
  <div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `
})
export class ModalComponent {

  public visible = false;
  public visibleAnimate = false;

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }
}

To show the backdrop, you'll need something like this CSS:

.modal {
  background: rgba(0,0,0,0.6);
}
onContainerClicked()
[ngClass]="{'in': visibleAnimate}"
[ngClass]="{'show': visibleAnimate}"

very good, neat and clean solution.

@doorman: No problem :) I've updated my answer - you just need to add some styling to show the backdrop. As for the jQuery error, you don't need the bootstrap.js file here (this works without any bootstrap javascript file). Hope I'm understanding you correctly

@Mickey Sly, glad it's kinda working for you. Seems you have found a solution, but (for what its worth) what I would probably do (which may be more Angular) is have a currentItem variable in the component and when you click on a list item, you update that variable to show the selected list items data. The modal will bind to that variable. At the last second, display the dialog. But yes the ViewChildren documentation is pretty bad. I always find myself referring back to this same blogpost blog.mgechev.com/2016/01/23/

The (click)="hide()" on the outer DIV was closing the modal whenever I clicked anywhere in the content (e.g., into a textbox). I fixed this with <div class="modal-content" (click)="$event.stopPropagation();">

document.body.className += ' modal-open';
document.body.className = document.body.className.replace('modal-open', '');

Angular 2.0 and Modal Dialog - Stack Overflow

modal-dialog angular
Rectangle 27 3

Ah now I understand! You'll need to close your modal using javascript then :) I've written a little function here. Just add the "closeModal" class to the button which you want to close the modal for.

Basically it finds the parent modal that the button belongs to and closes that modal. Hopefully this helps and you can change it around if needs be.

$(".closeModal").click(function(){
        $(this).closest(".modal").modal("hide")
    });

Bootstrap provides a .modal() JQuery plugin to let you control modals. Take a look: http://getbootstrap.com/javascript/#modals

I am asking a nesting Modal. First Modal Popup contain a link to open another Modal Popup. jsfiddle.net/JigneshPatel/kjazcz5e/2

Thanks Buddy it is working. Exactly what I want.

I know this is old, but for the next person to find this, you can do this without any javascript. use data-toggle instead of data-dismiss, and set the data-target to the modal that you want to close. I updated the jsfiddle to demonstrate: jsfiddle.net/kjazcz5e/24

javascript - Bootstrap: modal.js v3.2.0 Nested modal popup - Stack Ove...

javascript jquery twitter-bootstrap popup bootstrap-modal
Rectangle 27 3

Ah now I understand! You'll need to close your modal using javascript then :) I've written a little function here. Just add the "closeModal" class to the button which you want to close the modal for.

Basically it finds the parent modal that the button belongs to and closes that modal. Hopefully this helps and you can change it around if needs be.

$(".closeModal").click(function(){
        $(this).closest(".modal").modal("hide")
    });

Bootstrap provides a .modal() JQuery plugin to let you control modals. Take a look: http://getbootstrap.com/javascript/#modals

I am asking a nesting Modal. First Modal Popup contain a link to open another Modal Popup. jsfiddle.net/JigneshPatel/kjazcz5e/2

Thanks Buddy it is working. Exactly what I want.

I know this is old, but for the next person to find this, you can do this without any javascript. use data-toggle instead of data-dismiss, and set the data-target to the modal that you want to close. I updated the jsfiddle to demonstrate: jsfiddle.net/kjazcz5e/24

javascript - Bootstrap: modal.js v3.2.0 Nested modal popup - Stack Ove...

javascript jquery twitter-bootstrap popup bootstrap-modal