Twitter Bootstrap Question posted in

Twitter bootstrap – Reset Bootstrap modal params after initialization

Bootstrap modals allow you to pass options through Javascript to do things such as make your modal not closable using backdrop: "static".

However, once you initialize a modal without any params $('#myModal').modal(); and then try to call it again this time with different params $('#myModal2').modal({backdrop:"static"}); the modal is still initialized with no params, in this case it is still closable even though I called it again with the backdrop: "static" option.

Is there a way to reinitialize or change the paramaters of a Bootstrap modal once it has been called?

Here is a snippet showing the issue:

$('body').on('click','#static',function() {
    $('#myModal').modal({backdrop:"static"});
});

$('body').on('click','#modal',function() {
    $('#myModal').modal();
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<a id="static" href="#myModal" role="button" class="btn" >Static Modal</a>
<a id="modal" href="#myModal" role="button" class="btn">Modal</a>

<div class="modal fade" id="myModal">
   Foo
</div>
  1. Click “Static Modal” and a modal appears that cant be closed.
  2. Refresh
  3. Click “Modal” and a modal appears that can be closed, close it
  4. Click “Static Modal”, now a modal appears that can be closed, when it shouldn’t
Tags:

2

Answers


  1. 0

    I would recommend this Bootstrap Modal plugin to solve your problem quickly:

    http://nakupanda.github.io/bootstrap3-dialog/

    Back to the question here, by using above plugin, you should be able to achieve by these lines:

        BootstrapDialog.show({
      title: 'To close or not to close it, this is a question.',
      message: 'Click buttons below and see how the closing behaviors change.',
      buttons: [{
        label: 'Modal closable',
        action: function(dialog) {
          dialog.setClosable(true);
        }
      }, {
        label: 'Modal unclosable',
        action: function(dialog) {
          dialog.setClosable(false);
        }
      }]
    });
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.js"></script>

    This is more like a javascript program, no html markups needed, clean and neat.

    One more example in case you would like to change the closing behaviors outside any closures of the dialog (modal) definition:

    // Prepare a dialog instance but do not open it at this moment
var dialog = new BootstrapDialog();

// Buttons clicked
$('#btn-closable').click(function() {
  dialog.setClosable(true);
  dialog.setTitle('This modal is CLOSABLE');
  dialog.setMessage('Just close the modal as usual.');
  dialog.open();
});
$('#btn-unclosable').click(function() {
  dialog.setClosable(false);
  dialog.setMessage(function(dialogInstance) {
    var $button = $('<button>Modal Closable</button>');
    $button.click(function() {
      dialogInstance.setClosable(true);
    });

    return $button;
  });
  dialog.setTitle('This modal is UNCLOSABLE');
  dialog.open();
});
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.js"></script>
<button id="btn-closable">
  Modal Closable
</button>
<button id="btn-unclosable">
  Modal Unclosable
</button>

    The 2nd example also demonstrates a handy way to dynamically change modal title and message, and the message can also be set as a closure, which offers you opportunities of building fancy things inside the modal, in JAVASCRIPT fashion.

    Login or Signup to reply.
  2. 0

    $.extend( $( '#myModal2' ).data( 'bs.modal' ).options, { backdrop: "static" } );

    or

    $.extend( $( '#myModal2' ).data( 'modal' ).options, { backdrop: "static" } );

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search