I want to append html code in bootstrap modal

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=".php?u=www.10times&title=Come join me at"+eventname+"on "+eventstartdate+", "+eventcityname+""></a></li>
                  <li><a href=";utm_campaign=201308&url=/"+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/"+eventname+""></a>
                  </li>


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

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 problem I'm getting:

• modal is now working
• guide how to show HTML content in bootstrap modal

JSFiddle: /

I want to append html code in bootstrap modal

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>

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 problem I'm getting:

• modal is now working
• guide how to show HTML content in bootstrap modal

JSFiddle: http://jsfiddle.net/4gW4y/115/

• javascript
• jquery
• html
• css
• twitter-bootstrap

• is there an error in console when you try to open the modal? – anpsmn Commented Apr 16, 2015 at 6:15
• no error but i cn"t dig where is issue (modal is opening). – afeef Commented Apr 16, 2015 at 6:16
• can you hlp in apending html code in modal – afeef Commented Apr 16, 2015 at 6:19

5 Answers 5

Bootstrap comes with methods for showing & hiding modals. With bootstrap 3 you can do:

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

It looks like you're trying to use Javascript variables (eventname, eventstartdatae, eventcityname) directly in the HTML. Instead, you could try building the URL with Javascript, and set the <li> (list items) and <a href=""> (links) with jQuery:

<!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>

Working fiddle

There are several ways to manipulate the data of a modal (or anything else really). Bootstrap provides some, and you can read more about them there.

If you want to use jQuery below are some examples:

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

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

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

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

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

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

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

    //Appends text from the hidden div, myHiddenContent, on 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>

Could you use a function to generate the hyperlinks?

E.g:

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

    function doSomething()
    {
    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,""."");
    }

Something like this?

The modal is working with the code. Check if bootstrap js is included.

You can use the shown event of modal to add the variables.

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