Показывать всплывающую модель после нажатия - PullRequest
Новая
       40

Показывать всплывающую модель после нажатия

0 голосов
/ 25 февраля 2020

У меня есть панель навигации в этой панели навигации, в конце у меня есть опция твита, поэтому, когда кто-то нажимает на этот твит, должна открываться всплывающая модель. Я пробовал с приведенным ниже кодом, но он не работает. Кто-нибудь ведет меня, где я иду не так? 

$(document).ready(() => {
  $('#header #nav-menu-container ul').append('<li class="tweet"><a href="#tweetmodel">Tweets</a></li>').addClass('additionalnavtext');
  $('.tweet').click(() => {
    $('<div id="tweetmodel" class="modal"><p>Testing</p><a href="#" rel="modal:close">Close</a></div>').open();
  });
});

Ответы [ 4 ]

0 голосов
/ 25 февраля 2020 

<html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
    </head>
    <body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav-menu-container">
        <ul class="navbar-nav"> 
        </ul>
      </div>  
    </nav>
     <div class="container">
      <div class="row">
      </div>
      <div id="modalContainer">
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <script>
      $(function(){
    const tweetli = $(`<li class="nav-item">
            <a class="nav-link tweet" href="javascript:void(0)">Tweets</a>
      </li>`).appendTo('#nav-menu-container ul');
    
    tweetli.find('a.tweet').on('click', ()=>{
    	$('#modalContainer').html($(`<div class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save changes</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>`).modal('show'));
    })
    })
      </script>
    </body>
    </html>
0 голосов
/ 25 февраля 2020

Функция .click () будет связываться, только если элементы DOM загружены полностью. Любой динамический контент c или вещи, загруженные после DOM, не будут работать для функции .click (). Обработчик не будет привязывать элемент DOM.

Следующий код решит проблему. 

$(document).on('click', '.tweet', function(e){
    //your code here
});
0 голосов
/ 25 февраля 2020

Вы используете jQuery модал? В jQuery нет метода open. Если вы используете jQuery модальный, код должен быть таким: 

$(document).ready(() => {
  $('#header #nav-menu-container ul').append('<li class="tweet"><a href="#tweetmodel">Tweets</a></li>').addClass('additionalnavtext');
  $('.tweet').click(() => {
    $('<div id="tweetmodel" class="modal"><p>Testing</p><a href="#" rel="modal:close">Close</a></div>').modal();
  });
});

Рабочий исходный код здесь: https://jsfiddle.net/bravemaster619/0hpf51o9

$(document).ready(() => {
  $('#header #nav-menu-container ul').append('<li class="tweet"><a href="#tweetmodel">Tweets</a></li>').addClass('additionalnavtext');
  $('.tweet').click(() => {
    $('<div id="tweetmodel" class="modal"><p>Testing</p><a href="#" rel="modal:close">Close</a></div>').modal();
  });
});
body {
  background: #eeeeee;
  padding: 20px;
  font-family: Helvetica;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" rel="stylesheet" />


<div id="header">
  <div id="nav-menu-container">
    <ul>

    </ul>
  </div>
</div>
0 голосов
/ 25 февраля 2020

Поскольку вы добавили элемент с классом tweet позже, он не доступен в DOM для jQuery. Попробуйте это 

$('body').on('click', '.tweet', () => {
    //your code here
});
...