php - 动态创建html模态窗口按钮-6ren

php - 动态创建html模态窗口按钮

转载作者：行者123 更新时间：2023-11-29 18:42:12

我创建了一个 Web 应用程序，其功能之一是列出与特定搜索匹配的产品。但是现在我希望能够在每个产品旁边有一个按钮，按下该按钮将打开一个带有更大图像和更多细节的模式框。我知道如何创建一个模态框并拥有一个可以成功工作的模态框。

我的问题是:我将如何动态创建按钮，以便它显示在每个搜索结果旁边？每个按钮都必须不同。

<?php //connect to DB
$db = mysqli_connect('localhost','root','notactualpassword','bnh2012')
or die('Error connecting to MySQL server.');

?>

    // Get the modal
    var modal = document.getElementById('myModal');
    
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

/* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    
    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }
    
    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

<html>
    <head>

    </head>
    <body>
    
    <h2>Pop-up Test</h2>
    
    <!-- Trigger/Open The Modal -->
    <button id="myBtn">Press Me</button>
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
    
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <img src="/webERP/companies/bnh2012/part_pics/PG219M.jpg" alt="Test Belt" style="width:304px;height:228px;">
        <p>This is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long description</p>
      </div>
    
    </div>

    
    </body>
    </html>

最佳答案

Bootstrap 允许您创建动态按钮。有关单个模型的更多详细信息，请参阅此链接。

http://getbootstrap.com/javascript/#modals

$('#exampleModal').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-body #image').attr('src',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">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 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>

<div class="row">
  <div class="col-sm-4 col-md-4">
    <div class="thumbnail">
      <img src="http:placehold.it/250x250?text=first image" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Test 1</p>
        <p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="http://placehold.it/250x250?text=first image">Model</button></p>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-4">
    <div class="thumbnail">
      <img src="http:placehold.it/250x250?text=second image" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Test 2</p>
        <p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="http://placehold.it/250x250?text=second image">Model</button></p>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-4">
    <div class="thumbnail">
      <img src="http:placehold.it/250x250?text=thired image" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Test 3</p>
        <p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="http://placehold.it/250x250?text=thired image">Model</button></p>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <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="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <img src="" id="image">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

关于php - 动态创建html模态窗口按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44881180/

文章推荐： mysql - 如何使用参数重复mysql游标？

文章推荐： javascript - 如何在 React 中通过 API 下载文件？

文章推荐： mysql - SQL 仅选择列上具有最大值的行

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

php - 动态创建html模态窗口按钮