Jump to content

Archived

This topic is now archived and is closed to further replies.

globalnative

Modal from Callout section

Recommended Posts

globalnative

Is it possible, and if so, how? :)

Share this post


Link to post
Share on other sites
James B

Hi there,

 

You can add the bootstrap html (below) for a modal into the 'text on button' field. It's a bit messy but it does work. Just edit the html to include your own content/message.

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
globalnative

Nicely done...yes, a bit messy though :D. May do something using some other ideas I've been thinking of. Also, yours works up to a point, but when the modal opens it grays out the whole screen, see linked screenshot.

 

Thanks for the help as always!

Nate

 

https://www.dropbox.com/s/6afls7xbj96qcr7/Screenshot%202013-12-04%2011.36.32.png

Share this post


Link to post
Share on other sites
Danny

This is achievable without evening using the iCallout section.

The iCallout section is basically one box containing text and the other containing a button. So you could create the iCallout section without the need for the section.

 

Method 1

 

Add the Two Column section to your template, then add two MediaBoxes one in each column.

Then use some basic HTML to the left column to add your text such as <h1>This is a my callout text</h1>

In the right column MediaBox, use the modal code provided by James.

Thats it, a callout section with only two MediaBoxes.

 

Method 2

 

Same principle as above, but instead of using the modal code provided by James, you could use a Lightbox or FancyBox plugin and use that plugins class in your button code and that will create a modal popup using the lightbox or fancybox effect.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×