How to reuse the same modal window, but with a different title or heading? [duplicate]

Question

How to reuse the same modal window, but with a different title or heading? [duplicate]

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

0

I am implementing several modal windows through Bootstrap. One for each different thing. I have done the test to load different data in the same modal window.

I explain ...

I have one to pick up favorite users, another for followers and another for users I follow.

I have done the test for when I press the indicated button for any of the data I want, I open the same modal, but with the difference that they bring me data according to the button I press, be it favorites, followers and Following. Everything is going very well.

These data I bring from the BD through ajax (Jquery) and PHP.

What is the problem?

The problem is in the title I want for different occasions.

How do I display a different title for each type of data I bring?

Example:

                              Usuarios favoritos.

                            Usuarios a los que sigo.

                            Usuarios que me siguen.

Maybe they can understand what I mean.

php bootstrap ajax

asked by luis 10.04.2017 в 22:21

source

4 answers

2

I suggest BootstrapDialog (look at the examples, I personally like why not I need to create a div or container where everything will be placed) ; you use it in the following way

BootstrapDialog.show({
    title: 'Aquí el título de tu formulario',
    message: 'aqui cadena que forma/contene los tag html de tu formulario o datos a mostrar',
    closeByBackdrop: false,
    closeByKeyboard: true,
    closable: true,
    size: BootstrapDialog.SIZE_LARGE, // Hay varias opciones
    type: BootstrapDialog.TYPE_INFO, // Hay varias opciones
    onshown: function (dialogRef) {
                dialogRef.getModal()).first().focus();
    },
    buttons: [
            {
                label: 'Guardar',
                action: function (dialogRef) {
                                // Todo tu mágia a realizar
                                dialogRef.close(); // Se indica cerrar la ventana
                }
            },
            {
                label: 'Cancelar/Cerrar', // Según sea requieras 
                action: function (dialogRef) {
                                dialogRef.close(); // Se indica cerrar la ventana
                }
            } /* Puedes agregar botones como necesites*/
    ]
});

example of an implementation; I already assume you get your html to show and definite title

function mostrarMsgDialogo(elTitulo, elMensaje) {

   BootstrapDialog.show({
      title: elTitulo,
      message: elMensaje,
      /* Todo lo demás */
   });

}

example of use:

<!-- todo lo necesario antes -->

mostrarMsgDialogo('Agregar', 'contenido html/texto');
<!-- otro -->
mostrarMsgDialogo('Nuevo', 'contenido html/texto');
<!-- otro -->
mostrarMsgDialogo('Modificar', 'contenido html/texto');
<!-- otro -->
mostrarMsgDialogo('Editar', 'contenido html/texto');

<!-- todo lo necesario despues -->

answered by 10.04.2017 в 22:48

1

Quite simply, just add an id to the title

<h4 class="modal-title" id="modalTitle">Modal Header</h4>

And create a function to call it with the title you want to put

function mostrarModal(titulo) {
  $("#modalTitle").html(titulo);
  $("#myModal").modal("show");
}

Here is the complete example:

function mostrarModal(titulo) {
  $("#modalTitle").html(titulo);
  $("#myModal").modal("show");
}

<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="modalTitle">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>


<button type="button" onclick="mostrarModal('Habia un pajaro chiquito')">modal titulo 1</button>
<button type="button" onclick="mostrarModal('tengo sed')">modal titulo 2</button>
<button type="button" onclick="mostrarModal('algo mas')">modal titulo 3</button>

answered by 10.04.2017 в 22:31

1

Using an id in the title tag: $ ("# titulo_dinamico"). html (titulo_que_quieras)

You have:

<div class="modal">
  <div class="modal-dialog" role="document">
       <h4 class="modal-title" id="titulo_dinamico">Aquí iría el título que quieres</h4>
        ...
   </div>
</div>

When you obtain your data by ajax, you can add a value more 'title'. data.datos = your_data data.title = the_title or place it manually.

answered by 10.04.2017 в 22:37

Validate a date received from html5 Date in java and send it to Mysql How to limit the number of characters in a JTextField in Java? [closed]

score 0 · Accepted Answer

I found something on the same Bootstrap page

  

  $(document).ready(function(){

$('#multi_opt_user').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(recipient)
 
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>







<a href="#" data-toggle="modal"  data-target="#multi_opt_user" data-whatever="Personas que me siguen." class="add_more" id="add_more_to">Seguidores</a>


<a href="#" data-toggle="modal"  data-target="#multi_opt_user" data-whatever="Mis favoritos." id="makeagifttosomeone">
    <i class="fa fa-gift" aria-hidden="true"></i><br>
    <span class="sp_style">Favoritos</span>
  </a>










<!-- Modal multipropositos,tanto para agregar usuarios a  -->
  <div class="modal fade" id="multi_opt_user" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
         <div class="modal-header">
         <i class="fi-heart"></i>
             <button id="pethatlimypro" type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title"></h4>
                
               

                        <div class="modal-body">
                           <div id="pocos"></div>
                                  </div>

                                    <div class="modal-footer">
                                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                          </div>
                                              </div>
                                                  </div>
                                                       </div>