Show specific modal or image depending on various criteria

Question

Show specific modal or image depending on various criteria

Seeking guidance on how to achieve the following tasks in a simple manner as my understanding of HTML, Bootstrap, and CSS is basic:

'When radio button #1, radio button #4, and button #2 are clicked, upon submission display modal 1 with an image at a specific part of the page.'

'If radio button #1, radio button #2, and button #7 are clicked, upon submission show modal 23 with an image at a designated spot on the page.'

I believe this can be accomplished utilizing Bootstrap but I am struggling to implement it. Any tips or advice on how to proceed would be greatly appreciated.

html css twitter-bootstrap

Answer 1

Answer №1

Referencing the information from the Bootstrap modal guide itself:

If you have multiple buttons that trigger a similar modal but with various contents, utilize event.relatedTarget and HTML data-* attributes (possibly through jQuery) to adjust the modal's content based on the clicked button.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#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-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

As your specific requirements are unknown, feel free to customize this code accordingly.

Answer 2

Referencing the information from the Bootstrap modal guide itself:

If you have multiple buttons that trigger a similar modal but with various contents, utilize event.relatedTarget and HTML data-* attributes (possibly through jQuery) to adjust the modal's content based on the clicked button.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#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-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

As your specific requirements are unknown, feel free to customize this code accordingly.

Show specific modal or image depending on various criteria

Answer №1

Similar questions

Unable to assign a basic HTML class to a Blazor component

Experiencing issues with connecting to jQuery in an external JavaScript file

JavaScript opacity adjustments not achieving desired outcome

Is there a WebKit equivalent to the MDC (Mozilla Documentation Center)?

Use JQuery to reverse the most recent button click

Guide on positioning an SVG button within a form

Align the final row to the left in a flexbox that is centered

The minimum height of the IE element could not fully expand within its flex container that was set to absolute positioning

Searching for an AngularJS and Bootstrap Dual Listbox Solution

What are the steps for creating personalized sliders with WordPress?

Use jQuery to replace this color with that color in CSS every time it appears

Sharing a collection of data fields

Having trouble getting an HTML form with PHP to successfully save data into a MySQL database server

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

What is the best way to add data from an array to a DOM element in the same order it was retrieved from Firebase?

Sending an object from ng-repeat to a different page for the purpose of showcasing its contents

Utilizing AngularJS to include information into JSON-LD

The functionality of Jquery-chosen appears to be malfunctioning when applied to a select element

Fixed width for the last column in DataTables

The functionality of Angular bootstrap scrollspy is hindered when dealing with dynamically changing image content