Hi
Hoping someone can point me in the right direction. I would like to create a small pop-up box to display some text, on my product description. So when link text is clicked, it brings up a small pop-up box with additional text, eg more information about the fabric.
I have looked in the extension store but there are only have popup extensions when a certain page is visited, or action taken. I want something much simpler.
Can anyone let me know how to do this please?
Thank you
OC2.0.1.1
If you are comfortable writing html you use the bootstrap modal
http://getbootstrap.com/javascript/#modals
Put the editor in 'source' mode first! </>
http://getbootstrap.com/javascript/#modals
Put the editor in 'source' mode first! </>
Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: OpenCart version 3+ 
Thanks!
Thanks for getting back to me. I ahve taken a look at the link you sent. I don't know much about html but I think the code for what I want is this:
But how do create a link to display this code when some text is clicked?
Thank you for your help.
Code: Select all
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Body text </p>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->Thank you for your help.
OC 2.0.1.1
I edited the code below to get you started. Untested, from the top of my head 
I'm not sure if php tags work inside the editor, they might get stripped.
You can use instead of text, icons like <i class="fa fa-eye-open"></i>
If you want more modals on the same page, make sure id="xxx" are unique
Check the font-awesome site for possible icons.
Hope it helps, if not you know html now
Code: Select all
<!--option button-->
<button class="btn btn-info" data-toggle="modal" data-target="#my-awesome-popup-1">
button text, for multilingual try <?php echo $button_view; ?>
</button>
<!--option link without button to open modal-->
<a data-toggle="modal" data-target="#my-awesome-popup-1">link text</a>
<div id="my-awesome-popup-1" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Optional title for your popup</h4>
</div>
<div class="modal-body">
<p>some text, links and images</p>
<img src="" alt="popup">
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->You can use instead of text, icons like <i class="fa fa-eye-open"></i>
If you want more modals on the same page, make sure id="xxx" are unique
Check the font-awesome site for possible icons.
Hope it helps, if not you know html now
Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: OpenCart version 3+
Thanks!
That fantastic! Thank you so much
But the link doesn't work on a mobile display? I am using the option link without a button to open the modal.
I have been taking a look at the site you gave a link for, and I think the Popover seems more suitable and simpler for my purposes. I have tried to edit one of the examples given, to remove the button to open the popover to:
But the content text is not displayed when the text link is clicked. Only the text 'dismissible popover' is shown when the text is hovered over. What is missing from the code? I removed the button class from the original code, and tried to copy the code you sent, for without the button.
But the link doesn't work on a mobile display? I am using the option link without a button to open the modal.
I have been taking a look at the site you gave a link for, and I think the Popover seems more suitable and simpler for my purposes. I have tried to edit one of the examples given, to remove the button to open the popover to:
Code: Select all
<a tabindex="0" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content.">Dismissible popover</a>
Last edited by Khal on Thu Feb 11, 2016 10:09 pm, edited 1 time in total.
OC 2.0.1.1
I left out the href tag because it might reopen the page.
Try <a href="#" or <a href="#my-awesome-popup"
But the data attribute should open it with or without href.
Try <a href="#" or <a href="#my-awesome-popup"
But the data attribute should open it with or without href.
Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: OpenCart version 3+
Thanks!
You're welcome.
You can always try out stuff in a standard html file before adding it to OC to save time
Always use the data attributes or else you have to add javascript to make it work.
Cheers
You can always try out stuff in a standard html file before adding it to OC to save time
Always use the data attributes or else you have to add javascript to make it work.
Cheers
Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: OpenCart version 3+
Thanks!
Who is online
Users browsing this forum: No registered users and 39 guests
