A step-by-step guide on adding HTML content to a Bootstrap modal

Question

A step-by-step guide on adding HTML content to a Bootstrap modal

Looking for assistance in appending HTML code within a Bootstrap modal.

Here is the HTML content:

<div class="modal fade" id="share12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content get_direction_modal_bg">
         <div class="text-right"><a class="fa fa-times white normal12" data-dismiss="modal"> close</a></div>
         <div class="modal-body">
            <p class="white text-center">Share this Event</p>
            <div class="share_list_popup">
               <ul>

           <li><a href="https://www.facebook.com/sharer/sharer.php?u=www.10times.com&title=Come join me at"+eventname+"on "+eventstartdate+", "+eventcityname+""></a></li>
                  <li><a href="http://www.linkedin.com/shareArticle?mini=true&utm_campaign=201308&url=http://10times.com/"+eventname+"&title=Come join me at  "+eventname+" on "+eventstartdate+","+eventcityname+".&utm_source=LinkedIn&source=LinkedIn
                     Come join me at "+eventname+" on "+eventstartdate+","+eventcityname+". Find event details at 10times.com/"+eventname+""></a>
                  </li>


               </ul>
            </div>
         </div>
      </div>
   </div>
</div> 
<a href="#" data-target="#share12" data-toggle="modal"><img src="images/share.png"></a>

And here's the accompanying Javascript code:

 var modal_event_name=document.getElementById("modal_event_name");
 var modal_event_startdate=document.getElementById("modal_event_name");
 var modal_city_name=document.getElementById("modal_event_name");
 $('#share12').modal('show');

The issue being faced:

The modal is not working as expected
Need guidance on displaying HTML content within a Bootstrap modal

View the JSFiddle example here

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

One of the convenient features of Bootstrap is its built-in methods for displaying and hiding modals. In Bootstrap 3, you can achieve this with the following code:

$("#pop").on("click", function() { 
  $('#imagemodal').modal('show');
  $('#imagemodal').on('shown.bs.modal', function() {
    $('#imagemodal').find('.modal-body').append('<p>insert some custom HTML content here</p>');
  });
});

Answer 2

One of the convenient features of Bootstrap is its built-in methods for displaying and hiding modals. In Bootstrap 3, you can achieve this with the following code:

$("#pop").on("click", function() { 
  $('#imagemodal').modal('show');
  $('#imagemodal').on('shown.bs.modal', function() {
    $('#imagemodal').find('.modal-body').append('<p>insert some custom HTML content here</p>');
  });
});

Answer 3

Answer №2

It appears that you are attempting to directly use Javascript variables (eventname, eventstartdatae, eventcityname) within the HTML code. A better approach would be to construct the URL using Javascript and then utilize jQuery to set the <li> (list items) and <a href=""> (links):

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

<body>

<div id="modal_event_name">My Event Name</div>
<div id="modal_event_startdate">My Event Start Date</div>
<div id="modal_city_name">My Event City Name</div>

<div class="modal fade" id="share12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content get_direction_modal_bg">
      <div class="text-right"><a class="fa fa-times white normal12" data-dismiss="modal">close</a></div>
      <div class="modal-body">
        <p class="white text-center">Share this Event</p>
        <div class="share_list_popup">
          <ul>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<button onclick="showModal()">Show Modal</button>

<a href="#" data-target="#share12" data-toggle="modal">Show Modal From Link</a>

<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
  var eventname = document.getElementById("modal_event_name").textContent;
  var eventstartdate  = document.getElementById("modal_event_startdate").textContent;
  var eventcityname  = document.getElementById("modal_city_name").textContent;

  var facebookLink = "https://www.facebook.com/?" + eventname + "&" + eventstartdate + "&" + eventcityname

  var linkedinLink = "http://www.linkedin.com/?" + eventname + " & " + eventstartdate + "&" + eventcityname 

  $('.share_list_popup ul').append('<li><a href="' + facebookLink + '">Facebook</a></li>');
  $('.share_list_popup ul').append('<li><a href="' + linkedinLink + '">LinkedIn</a></li>');

  function showModal() {
    $('#share12').modal('show');
  }
</script>
</body>

</html>

View working example on JSFiddle

Answer 4

It appears that you are attempting to directly use Javascript variables (eventname, eventstartdatae, eventcityname) within the HTML code. A better approach would be to construct the URL using Javascript and then utilize jQuery to set the <li> (list items) and <a href=""> (links):

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

<body>

<div id="modal_event_name">My Event Name</div>
<div id="modal_event_startdate">My Event Start Date</div>
<div id="modal_city_name">My Event City Name</div>

<div class="modal fade" id="share12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content get_direction_modal_bg">
      <div class="text-right"><a class="fa fa-times white normal12" data-dismiss="modal">close</a></div>
      <div class="modal-body">
        <p class="white text-center">Share this Event</p>
        <div class="share_list_popup">
          <ul>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<button onclick="showModal()">Show Modal</button>

<a href="#" data-target="#share12" data-toggle="modal">Show Modal From Link</a>

<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
  var eventname = document.getElementById("modal_event_name").textContent;
  var eventstartdate  = document.getElementById("modal_event_startdate").textContent;
  var eventcityname  = document.getElementById("modal_city_name").textContent;

  var facebookLink = "https://www.facebook.com/?" + eventname + "&" + eventstartdate + "&" + eventcityname

  var linkedinLink = "http://www.linkedin.com/?" + eventname + " & " + eventstartdate + "&" + eventcityname 

  $('.share_list_popup ul').append('<li><a href="' + facebookLink + '">Facebook</a></li>');
  $('.share_list_popup ul').append('<li><a href="' + linkedinLink + '">LinkedIn</a></li>');

  function showModal() {
    $('#share12').modal('show');
  }
</script>
</body>

</html>

View working example on JSFiddle

Answer 5

Answer №3

When it comes to manipulating modal data or any other element, there are various methods you can utilize. Bootstrap offers a range of options, which you can explore further here.

If you prefer using jQuery, here are some sample scenarios:

$("#pop").on("click", function() {

  //ref. to the modal
  var imgModal = $('#imagemodal');

  //Display the modal
  imgModal.modal('show');

  //reference to the body of the modal
  var imgModalBody = imgModal.find('.modal-body');

  //Replace the entire content of the body within the modal with this
  imgModalBody.html('<span style="color:red">This is appended directly from a string or variable</span><br/>');

  //Append a button to the modal body
  imgModalBody.append(' <button id="clickMe">Load content from hidden div</button><br/>');

  //Add a click event on the newly appended button
  imgModal.on("click", "#clickMe", function() {

    //Append text from the hidden div, myHiddenContent, onto the page 
    imgModalBody.append(' ' + $('#myHiddenContent').html());

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

<a href="#" id="pop" data-target="#share12" data-toggle="modal">Open my modal</a>

<div id="myHiddenContent" style="display:none;">This is appended from html already on the page (hidden or not)</div>

<!-- Modal -->
<div class="modal fade" id="imagemodal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Image preview</h4>
      </div>
      <div class="modal-body">
        <img src="" id="imagepreview" style="width: 400px; height: 264px;" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 6

When it comes to manipulating modal data or any other element, there are various methods you can utilize. Bootstrap offers a range of options, which you can explore further here.

If you prefer using jQuery, here are some sample scenarios:

$("#pop").on("click", function() {

  //ref. to the modal
  var imgModal = $('#imagemodal');

  //Display the modal
  imgModal.modal('show');

  //reference to the body of the modal
  var imgModalBody = imgModal.find('.modal-body');

  //Replace the entire content of the body within the modal with this
  imgModalBody.html('<span style="color:red">This is appended directly from a string or variable</span><br/>');

  //Append a button to the modal body
  imgModalBody.append(' <button id="clickMe">Load content from hidden div</button><br/>');

  //Add a click event on the newly appended button
  imgModal.on("click", "#clickMe", function() {

    //Append text from the hidden div, myHiddenContent, onto the page 
    imgModalBody.append(' ' + $('#myHiddenContent').html());

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

<a href="#" id="pop" data-target="#share12" data-toggle="modal">Open my modal</a>

<div id="myHiddenContent" style="display:none;">This is appended from html already on the page (hidden or not)</div>

<!-- Modal -->
<div class="modal fade" id="imagemodal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Image preview</h4>
      </div>
      <div class="modal-body">
        <img src="" id="imagepreview" style="width: 400px; height: 264px;" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 7

Answer №4

Is it possible to create hyperlinks using a function?

For example:

<a href="javascript:executeFunction()">Link</a>

    function executeFunction()
    {
    var modal_event_name=document.getElementById("modal_event_name");
     var modal_event_startdate=document.getElementById("modal_event_name");
     var modal_city_name=document.getElementById("modal_event_name");

var url="path?modal_event_name="+modal_event_name+"&modal_event_startdate="+modal_event_startdate + "&modal_city_name="+modal_city_name;
window.open(url,""."");
    }

Does this approach work for you?

Answer 8

Is it possible to create hyperlinks using a function?

For example:

<a href="javascript:executeFunction()">Link</a>

    function executeFunction()
    {
    var modal_event_name=document.getElementById("modal_event_name");
     var modal_event_startdate=document.getElementById("modal_event_name");
     var modal_city_name=document.getElementById("modal_event_name");

var url="path?modal_event_name="+modal_event_name+"&modal_event_startdate="+modal_event_startdate + "&modal_city_name="+modal_city_name;
window.open(url,""."");
    }

Does this approach work for you?

Answer 9

Answer №5

The modal functionality is operational with the provided code. Ensure that bootstrap js is included in the setup.

To incorporate variables, utilize the shown event of the modal.

var modal_event_name = "Event Name";
var modal_event_startdate = "10th July";
var modal_city_name = "SF"
$('#share12').modal('show');

$('#share12').on('shown.bs.modal', function () {
    if (!$(this).hasClass('social-links-added')) {
        $(this).addClass('social-links-added');
        var linkedin_url = "http://www.linkedin.com/shareArticle?mini=true&utm_campaign=201308&url=http://10times.com/" + modal_event_name + "&title=Come join me at  " + modal_event_name + " on " + modal_event_startdate + "," + modal_city_name + ".&utm_source=LinkedIn&source=LinkedIn Come join me at " + modal_event_name + " on " + modal_event_startdate + "," + modal_city_name + ". Find event details at 10times.com/" + modal_event_name;
        var facebook_url = "https://www.facebook.com/sharer/sharer.php?u=www.10times.com&title=Come join me at" + modal_event_name + "on " + modal_event_startdate + ", " + modal_city_name;
        $('.share_list_popup ul li:eq(0)').find('a').attr('href', facebook_url);
        $('.share_list_popup ul li:eq(1)').find('a').attr('href', linkedin_url);
        console.log(facebook_url);
        console.log(linkedin_url);
    }
});

Fiddle Link

Answer 10

The modal functionality is operational with the provided code. Ensure that bootstrap js is included in the setup.

To incorporate variables, utilize the shown event of the modal.

var modal_event_name = "Event Name";
var modal_event_startdate = "10th July";
var modal_city_name = "SF"
$('#share12').modal('show');

$('#share12').on('shown.bs.modal', function () {
    if (!$(this).hasClass('social-links-added')) {
        $(this).addClass('social-links-added');
        var linkedin_url = "http://www.linkedin.com/shareArticle?mini=true&utm_campaign=201308&url=http://10times.com/" + modal_event_name + "&title=Come join me at  " + modal_event_name + " on " + modal_event_startdate + "," + modal_city_name + ".&utm_source=LinkedIn&source=LinkedIn Come join me at " + modal_event_name + " on " + modal_event_startdate + "," + modal_city_name + ". Find event details at 10times.com/" + modal_event_name;
        var facebook_url = "https://www.facebook.com/sharer/sharer.php?u=www.10times.com&title=Come join me at" + modal_event_name + "on " + modal_event_startdate + ", " + modal_city_name;
        $('.share_list_popup ul li:eq(0)').find('a').attr('href', facebook_url);
        $('.share_list_popup ul li:eq(1)').find('a').attr('href', linkedin_url);
        console.log(facebook_url);
        console.log(linkedin_url);
    }
});

Fiddle Link

A step-by-step guide on adding HTML content to a Bootstrap modal

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

npm unable to retrieve Meteor package

Issue with Vue router: history mode fails to work on the second level

Practical applications of flexible layouts in everyday life

Adding rows to a database can be done by utilizing a dynamic form that consists of both repeatable and unique fields

Tips for choosing every initial td element within a table

Swapping out a View's content with the data fetched from an AJAX request

Mastering Typing for Enhanced Order Components using Recompose and TypeScript

Exploring the process of sending various variables from PHP to a jQuery function

The width of the <ul> element does not properly accommodate the width of the <li> elements during the animation that updates the width of the <li>

Fixing an $injector:unpr issue with Angular 1.6, MVC 4.6, and UI-Grid: A Step-by-Step Guide

Tips for changing a "raw" DOM Event into a React SyntheticEvent

What is the process for showcasing ImageGridFSProxy in an HTML file?

Is it possible for an onclick attribute to assign a function to document.getElementById without overwriting the existing value?

Check for equality with an array of objects when reacting to changes

What methods can be employed to reduce additional background tasks when altering a state in a React component?

The validation of radio input signals results in an error being returned

the mobile website is not properly aligned on a horizontal axis

What is the best way to ensure that a div takes up as much vertical space as possible within its

What is the proper way to invoke requestAnimFrame on a method within an object?

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript