CODEWITHSUNDEEP
jquerytwitter-bootstrapbootbox
Ahmad Badpey
Ahmad Badpey

Reputation: 6612

add modal-header element to opened alert box in bootbox

To show alert messages I use bootboxjs.com bootstrap jquery plugin.
after call bootbox.alert("Hello world!"); method , it generate below code and show a modal: 

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- dialog body -->
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        Hello world!
      </div>
      <!-- dialog buttons -->
      <div class="modal-footer"><button type="button" class="btn btn-primary">OK</button></div>
    </div>
  </div>
</div>

As you see generated modal has not modal-header element to show a header message by default.
i want all of alert boxes have a default header contains a custom message like : System Says :.

i know that there is a dialog() method in bootboxjs for show custom message that Could have modal-header element. But use dialog() need to write and repeat some lines to show a simple alert box.

Have any solution for this problem?

Upvotes: 0

Views: 2657

Answers (2)

Swaps
Swaps

Reputation: 1548

Not a direct answer but if anyone who's looking for custom header for bootbox, you can just pass your HTML directly to the title option of the modal.

bootbox.dialog({
  message: 'Your Message',
  title: '<div><h4>Your custom HTML Title</h4></div>'
});

Upvotes: 0

Tieson T.
Tieson T.

Reputation: 21221

Use an options object to specify the title, and it will generate the header you're after:

bootbox.alert({
    title: "I'm the title!",
    message: "I'm the message!",
    callback: function(){ console.log("I handled the callback!"); }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<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.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

Upvotes: 1

Related Questions