CODEWITHSUNDEEP
htmltwitter-bootstrapmodal-dialog
clestcruz
clestcruz

Reputation: 1111

Trying to put Bootstrap modal in a button

Is there a way I can use a button(input type="button") to show the Bootstrap modal. Basically the default is using anchor based on the documentation. I have tried experimenting but no luck.

I'm not sure if my coding is wrong or the Bootstrap modal can only be activated if it is an anchor tag. I have also tried googling or researching if anyone has created this kind of result.

Upvotes: 0

Views: 364

Answers (2)

user2663434
user2663434

Reputation:

simply u can fire event on Button Click and call function "onclick=showModal()"

JS CODE

function showModal()
{

    $("#modal-window-id").modal("show");

}

Upvotes: 1

Kippie
Kippie

Reputation: 3820

This should work the same way as with an anchor tag. The problem is, it's based on the href attribute, referring to the id of the modal window, and placing this attribute on a button might cause some html validation to go wonky.

If you don't care about that kind of stuff you can just replace your a tag with a button tag.

Edit: just noticed you were using an input element rather than a button. Either way, it should still work.

Edit2: Just verified if what I was saying wasn't total BS by looking at the bootstrap code (2.3.2), and found this snippet:

$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
    var $this = $(this)
      , href = $this.attr('href')
      , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
      , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())

    e.preventDefault()

    $target
      .modal(option)
      .one('hide', function () {
        $this.focus()
      })
  })

Looking at this, the href attribute isn't required, and you can use data-target instead when working with inputs and buttons.

Upvotes: 1

Related Questions