CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmodal-dialog
Hitesh Patwari
Hitesh Patwari

Reputation: 19

How to open a link which is inside a modal, in the modal

I have modal which is rendering a markdown :

<div class="markdown">

<div id="myModal" class="modal hide fade in">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
   </div>
   <div class="modal-body">
        Some content in here

     Some links here
     <p>Link1</p>
     <p>Link2</p>
     <p>Link3</p>
   </div>
     <div class="modal-footer">
     </div>

   </div>
</div>

Now, my problem is that when I click on any of the links : it refreshes the browser if used href .

I want to open the links inside the modal, how can I achieve that ?

Upvotes: 0

Views: 5244

Answers (2)

Saeed
Saeed

Reputation: 5488

use this command instead of data-dismiss="modal" in link

onclick="$('#squarespaceModal').modal('hide')"

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362390

One way is using a jQuery ajax method such as .load() to get the content from the link and load it into the .modal-body or .modal-content..

$('.lnk').click(function(){
  var lnk = $(this).data("src");
  $('.modal-body').text('wait..');
  $('.modal-body').load(lnk,function(){

  });
})

You'd change the links to this...

<div class="modal-body">
      <a href="#" data-src="/url" class="lnk">Link1</a>
      <a href="#" data-src="/url1" class="lnk">Link1</a>
      <a href="#" data-src="/url2" class="lnk">Link1</a>
</div>

Demo: http://bootply.com/87874

Another method:

Use iframe and jQuery to dynamically change the src of the frame: http://bootply.com/61676

Upvotes: 0

Related Questions