Como vincular dados dinâmicos em um modal de bootstrap

Dhara

Eu tenho um modal no meu formulário

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Image Tag Description</h4>
      </div>
      <div class="modal-body">
          <p id="desc">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
          <h2 id="cost">Cost : 20$</h2>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Edit</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

e eu tenho vários botões que toggel modal. Html do botão está seguindo

<button class="btn btn-primary tag_cnt" data-trigger="hover" 
        data-target="#myModal" data-toggle="modal" type="button" 
        style="top:144px; left:510px" value="1"></button>

eu tenho vários botões no meu formulário. agora tenho que chamar o mesmo modal a cada clique de botão e quero mostrar os dados dinamicamente no modal. Qual é a solução?

Hamed

Você pode passar uma variável dinâmica para uma função e, em seguida, na função, você pode usar essa variável para abrir 'manualmente' o modal:

<button class="btn btn-primary tag_cnt" style="top:144px; left:510px" onclick="showModal('data')" type="button" value="1"></button>

Em seu javascript, você pode acessar assim:

function showModal(data)
{
   //you can do anything with data, or pass more data to this function. i set this data to modal header for example
   $("#myModal .modal-title").html(data)
   $("#myModal").modal();
}

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Como vincular dados dinâmicos em um modal de bootstrap

Como vincular dados dinâmicos no gráfico de barras usando a chamada ajax em mvc c #?

Como vincular dados dinâmicos no gráfico de barras usando a chamada ajax em mvc c #?

Como vincular métodos dinâmicos em um v-for

Como inserir dados em um modal de bootstrap no MVC

Como vincular a dica de ferramenta de bootstrap a elementos dinâmicos

No Angular 8, como passar dados dinâmicos de um observável para um diálogo modal?

No Angular 8, como passar dados dinâmicos de um observável para um diálogo modal?

Em um método de ação, como posso vincular dados de postagem a um objeto dinâmico?

Como carregar dados dinâmicos em uma lista / tabela dentro de um painel-EXTJS

Como posso injetar dados dinâmicos em um arquivo manifest.json de aplicativo da web?

Como usar dados dinâmicos em um carrossel liso?

Como usar dados dinâmicos em um carrossel liso?

Como salvar dados inseridos em um modal de bootstrap em outro modelo

Como vincular dados que vêm do banco de dados em um menu suspenso angular de forma dinâmica?

Como vincular colunas resultantes a um quadro de dados em loop for?

Vuetify - Como gerar valores dinâmicos em tabelas de dados?

React Bootstrap: mapeamento de dados dentro do modelo não mostra dados dinâmicos no modal

Como mostramos dados dinâmicos em um arquivo .erb como em um arquivo json?

Como você preenche menus suspensos dinâmicos com base em um campo de número no banco de dados?

Como declarar um array de objetos dinâmicos em Java?

Como vincular dados dinâmicos ao ARIA-LABEL?

Como vincular dados de um controle e vincular à origem em uma variável WPF, C #

Como vincular dados a um combobox de uma tabela em um banco de dados MySql (WPF)

Como vincular campos de formulário dinâmicos a um HashSet no Play! com Java?

Como vincular dados à seleção de bootstrap

Passando dados dinâmicos para modal de bootstrap por adereços no VueJS

Passando dados dinâmicos para modal de bootstrap por adereços no VueJS

Como você atualiza um destino de dados modal Bootstrap existente?

TOP lista

  1. 1

    R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

  2. 2

    UITextView não está exibindo texto longo

  3. 3

    Dependência circular de diálogo personalizado

  4. 4

    Acessando relatório de campanhas na AdMob usando a API do Adsense

  5. 5

    Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

  6. 6

    R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

  7. 7

    Setas rotuladas horizontais apontando para uma linha vertical

  8. 8

    O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

  9. 9

    Definir um clipe em uma trama nascida no mar

  10. 10

    Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

  11. 11

    Como dinamizar um Dataframe do pandas em Python?

  12. 12

    regex para destacar novos caracteres de linha no início e no fim

  13. 13

    Why isn't my C# .Net Core Rest API route finding my method?

  14. 14

    Como obter a entrada de trás de diálogo em treeview pyqt5 python 3

  15. 15

    Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

  16. 16

    How to create dynamic navigation menu select from database using Codeigniter?

  17. 17

    Como recuperar parâmetros de entrada usando C #?

  18. 18

    Changing long, lat values of Polygon coordinates in python

  19. 19

    Livros sobre criptografia do muito básico ao muito avançado

  20. 20

    Método \ "POST \" não permitido no framework Django rest com ações extras & ModelViewset

  21. 21

    Pesquisa classificada, conte números abaixo do valor desejado

quentelabel

Arquivo