How to generate a Twitter Bootstrap modal but keep it hidden

Goose
September 8, 2016
201 views
3 votes
3 Answers

I want to create a Twitter Bootstrap modal, but keep it hidden until I’m ready to show it.

Here is the smallest amount of code to demonstrate. It successfully creates the modal, but it applies display: block to it inline, overriding my style.

    modalHtml = '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">'
        + '<div class="modal-dialog modal-lg" role="document">'
        + '<div class="modal-content">Hello World</div></div></div>'

    modal = jQuery(modalHtml); 

    modal.modal('show');

https://jsfiddle.net/Lx23xqbq/2/

I could add this

modal.modal('hide');

But this allows the modal to be visible for a split second.

How can I create a Twitter Bootstrap modal without displaying it to the user?

Answers

Modals are hidden via the CSS class .modal by default.

Remove modal.modal( 'show' );.

You have modal.modal( 'show' ); in your JS which causes the modal to be visible for a split second before you call modal.modal( 'hide' ).

Personally I would place the modal markup into the page before hand.

var $button = $('button');
var $modal = $('#myModal');

$modal.on('show.bs.modal', function(e) {

  // Optional. We update the modal with content stored in the data-content
  // attribute of the <button>.
  // You could also grab another hidden element to inject or perform 
  // AJAX here.
  var content = $(e.relatedTarget).data('content');

  $modal
    .find('.modal-content')
    .text(content);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" data-toggle="modal" data-target="#myModal" data-content="Hi Guy!">Show Modal</button>

<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">Hello World</div>
  </div>
</div>

Injecting into the page wouldn’t be much different.

var html =
  '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">' +
    '<div class="modal-dialog modal-lg" role="document">' +
      '<div class="modal-content">Hello World</div>' +
    '</div>' +
  '</div>';

// Append modal markup to page.
$('body').append(html);

var $button = $('button');
var $modal = $('#myModal');

$modal.on('show.bs.modal', function(e) {

  // Optional. We update the modal with content stored in the data-content
  // attribute of the <button>.
  // You could also grab another hidden element to inject or perform 
  // AJAX here.
  var content = $(e.relatedTarget).data('content');

  $modal
    .find('.modal-content')
    .text(content);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" data-toggle="modal" data-target="#myModal" data-content="Hi Guy!">Show Modal</button>

- BenHarrison
- September 8, 2016 at 10:26 pm
- 0 votes
0
How can I create a Twitter Bootstrap modal without displaying it to
the user?

Technically you are already creating the modal with your first 2 lines of code. It just isn’t displayed until the 3rd line (modal.modal('show');).

What I think you might be trying to accomplish is separating the code that creates the modal from the code that shows/hides it. The problem (I’m assuming) is that elsewhere in your code you no longer have a reference to the variable modal (that you created in modal = jQuery(modalHtml);), because it is out of scope.

Add this to your HTML page:
```
<div id="hidden-modal" style="display:none"></div>
```
Update your Javascript as described below:
```
modalHtml = '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">'
    + '<div class="modal-dialog modal-lg" role="document">'
    + '<div class="modal-content">Hello World</div></div></div>'

// inject the modal markup into the hidden element on the page
jQuery('#hidden-modal').html(modalHtml);

// whenever ready, retrieve the hidden modal html and display it
jQuery(jQuery('#hidden-modal').html()).modal('show');
```
https://jsfiddle.net/Lx23xqbq/3/
Login or Signup to reply.

If I understand your question this have to work:

$(document).ready(function () {
  
    draw();
  
});


function draw() {
  var html = ""
  html += '<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>';
  html += '<hr />';
  html += '<div id="myModal" class="modal fade" role="dialog">';
  html += '<div class="modal-dialog">';
  html += '<div class="modal-content">';
  html += '<div class="modal-header">';
  html += '<button type="button" class="close" data-dismiss="modal">&times;</button>';
  html += '<h4 class="modal-title">Modal Header</h4>';
  html += '</div>';
  html += '<div class="modal-body">';
  html += '<p>Some text in the modal.</p>';
  html += '</div>';
  html += '<div class="modal-footer">';
  html += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
  html += '</div>';
  html += '</div>';
  html += '</div>';
  html += '</div>';
  
  $('#modal').html(html);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="modal">
</div>

When page is loaded the function draw() draws the modal and keep it hidden until you click the button, hyperlink, label or whatever you want.

Please signup or login to give your own answer.

Click here to cancel reply.