web-dev-qa-db-fra.com

Comment fermer Bootstrap modal uniquement lorsque l'utilisateur clique sur fermer l'image?

Je veux fermer le modal UNIQUEMENT lorsque l'utilisateur clique sur fermer btn. Comme je le vois, j'ai besoin d'écraser cette partie du code de modal.js:

 hide: function (e) {
    e && e.preventDefault()

    var that = this

    e = $.Event('hide')//if I delete this line modal won't hide

    this.$element.trigger(e)

    if (!this.isShown || e.isDefaultPrevented()) return

    this.isShown = false

    $('body').removeClass('modal-open')

    escape.call(this)

    this.$element.removeClass('in')

    $.support.transition && this.$element.hasClass('fade') ?
      hideWithTransition.call(this) :
      hideModal.call(this)

Suis-je sur la bonne voie?

twitter-bootstrapmodal-dialog
36
MID

Lorsque vous lancez votre modal, vous pouvez passer les options:

{
  keyboard: false,
  backdrop: 'static'
}

ce qui désactivera la fermeture du modal en cliquant sur le fond et le bouton d'échappement. Ou ils peuvent être définis comme data-les attributs.

66
PerfectlyNormal

Vous pouvez définir votre comportement modal, en définissant le clavier de données et le fond de données.

 <div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
62
Tabares

Essaye celui-là

<div id="myModal" class="modal hide fade in" data-backdrop="static">
<div> </div>
</div>
8
Vikram

La meilleure façon de le faire à Jquery est:

<script type="text/javascript">
    $('#modal-id').modal({
        backdrop: 'static',
        keyboard: false
    });
</script>

OU en HTML:

<div id="modal-id" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

Mais, si vous avez déjà initialisé le modal, vous devez dissocier l'événement click de votre modal comme ceci par exemple:

<script type="text/javascript">
    //this remove the close button on top if you need
    $('#modal-id').find('.close').remove();
    //this unbind the event click on the shadow zone
    $('#modal-id').unbind('click');
</script>
6
Angel Fraga Parodi
<script type="text/javascript">
    $('#myModal').modal({
      backdrop: 'static',
      keyboard: false
    })
</script>
2
Tiago

Vous pouvez définir votre comportement modal, en définissant le clavier de données et le fond de données.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

De plus, cela fonctionne également dans les pages ASPX.

0
Arjun Singh Bisht