Comment modifier le jquery-ui boîte de dialogue modal bootstrap

J'ai le code suivant pour faire une boîte de dialogue de confirmation à l'aide de jQuery UI:

function Help(section) {

$("#userpopup").remove();
$("body").append("<div id='userpopup' title='Help' style='display:none'></div>");

$('#userpopup').dialog({
    autoOpen: true,
    width: 560,
    height: 500,
    buttons: {
        "OK": function () {
            $(this).dialog("close");
            $("#userpopup").remove();
        }
    },
    open: function (event, ui) {
        $("#userpopup").html("<iframe width='100%' height='400' src='?help&section=" + section + "' frameborder='0' marginwidth='0' marginheight='0' allowtransparency='true'></iframe>");
    },
    beforeClose: function (event, ui) {
        $("#userpopup").html("");
    }
});


return false;

}

<input onClick="javascript:Help('templates')" type="button" class="btn" value="help">

Comment le changer pour utiliser Bootstrap des Modaux?

OriginalL'auteur CrasHandBurN | 2013-05-18

  1. 5

    Vous pouvez utiliser la norme modal Bootstrap balisage..

    <input id="btnHelp" type="button" class="btn" value="help">

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Dialog</h3>
    </div>
    <div class="modal-body">
          <iframe src="" width="100%" height="400" frameborder="0"></iframe>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">OK</button>
    </div>
</div>

    et ensuite utiliser modal "show" de l'événement pour définir dynamiquement un autre iframe src..

    $('#helpBtn').click(function(){

    $('#myModal').on('show', function () {
        var frameSrc = "?help&section=templates"; //value can be passed from button
        $('iframe').attr("src",frameSrc);

    });
    $('#myModal').modal({show:true})
});

    Démonstration de l'iFrame à l'intérieur modal

    OriginalL'auteur Zim

  2. 5

    Juste à ajouter sur @Kris Zhang réponse: La Bootstrap, Jquery Plugin est vraiment la réponse à cette question. Les appels de fonction sont les mêmes que ceux de jquery boîtes de dialogue, mais il ajoute automatiquement les divs autour de la boîte de dialogue pour afficher le modal bootstrap style. Ajoutez simplement de voler ou de l'amorçage de la bibliothèque à partir du lien ci-dessus et que vous n'avez pas besoin d'utiliser des iframes.

    Hack sympa jusqu'à ce que vous vous rendez compte des choses comme des événements (ouverture, fermeture, etc) ne sont pas mises en œuvre. Peut-être que je suis absent quelque chose avec le désordre de Bootstrap et jQuery UI j'ai.

    OriginalL'auteur ford prefect

  3. 2

    Vous pouvez avoir un coup d'oeil à Bootstrap, jQuery Plugin

    Il est basé sur bootstrap 3.x

    Notez que lien-seules réponses sont découragés, de SORTE que les réponses devraient être le point final d'une recherche d'une solution (contre encore une autre escale de références, qui a tendance à devenir obsolètes au fil du temps). Veuillez considérer l'ajout d'un stand-alone synopsis ici, en gardant le lien comme référence.

    OriginalL'auteur Kris Zhang