Bootsrap - how to set the title and content dynamically

Question

I would like to show a bootstrap modal for my app. In which I would like to pass the size, title and content parameters. so using a single modal i can use multiple requirement.

with all above information i would like to pass the default options too.

at present i do like this:

var options = {
    "backdrop" : "static",
    "keyboard" : false,
    "show" : false
}

$('#basicModal').modal(options);

How can i extend this in to my requirement using the bootstrap inbuild/custom functions?

Any one help me please?

Live Demo

Update

I find a way to pass params, how it works?

http://www.jqueryscript.net/demo/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog/examples/#available-options

Check this link may helpful http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal — Sadikhasan, Dec 25 '14 at 05:34

waki · Accepted Answer · 2014-12-25T06:00:00.270

1

http://jsfiddle.net/dwojLdjk/5/

var options = {
    "backdrop" : "static",
    "keyboard" : false,
    "show" : true
}

$('#showModal').click(function() {
    $("#resultFormModal").find("h4.modal-title").html('new title');
    $("#resultFormModal").find("div.modal-body").html('new message');
    $("#resultFormModal").modal(options);
});

edited Dec 25 '14 at 06:00

answered Dec 25 '14 at 05:39

waki

1,248
2
17
27

Ok, But here i find some other way, http://www.jqueryscript.net/demo/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog/examples/#available-options – 3gwebtrain Dec 25 '14 at 05:41
@3gwebtrain Ok, do as you see fit. But your solution required include additional plugin, for what ? if you can do it with `jquery` – waki Dec 25 '14 at 05:47
I tried with is, i am getting error: `$('#basicModal').modal(); $('#basicModal').on('shown.bs.modal', function (e) { alert('Modal is successfully shown!'); });` – 3gwebtrain Dec 25 '14 at 06:17
error: `Unexpected identifier` - why any thing wrong? – 3gwebtrain Dec 25 '14 at 06:17
@3gwebtrain can you create `jsfiddle` with your error? – waki Dec 25 '14 at 06:19
1

@3gwebtrain you call modal after create page, you need call it with on click your button, remove `data-toggle="modal" data-target="#basicModal"` from your button, and delegate event on click button, look at my `jsfiddle` http://jsfiddle.net/dwojLdjk/6/ – waki Dec 25 '14 at 06:25

score 0 · Answer 2 · answered Dec 25 '14 at 05:40

0

You can set header like this

$('#myModalLabel').html('New Header');

and for body

$('.modal-body').html('<h1>New Body</h1>');

Below is fiddle demo.

Fiddle

answered Dec 25 '14 at 05:40

AB Vyas

2,349
6
26
43

Bootsrap - how to set the title and content dynamically

2 Answers2