I'm trying to prevent close of fancybox when someone click outside of fancybox-content area.
HTML:
<div id="banner-message" style="display: none">
<p>Hello World</p>
</div>
JS:
jQuery.fancybox.open(jQuery('#banner-message'), {
clickOutside: false
});
DEMO:
https://jsfiddle.net/xjw4b5jq/
You have to use clickSlide option instead.
fancybox3 works as a slider and you can reposition/resize slider area, therefore there are two similar, but different options.
I have used this config to prevent closing the modal clicking outside.
<!--HTML-->
<a id="enlace" href="#modal">enlace</a>
<div id="modal">
<p>Hola cracks</p>
</div>
// script
$("#enlace").fancybox({
clickSlide: false,
clickOutside: false
});
hope it works for u too :)
Related
I would like for the user to be able to drag the modal box to a different position, like how it can be done with the JQuery UI dialog.
I found on the official Semantic-UI documentations, there is the setting "detachable" for modal, which seems to have the description I'm after. However, even setting it to true doesn't seem to let me drag the modal around. Could someone please help me on this?
Here's the code thus far:
var aFunction = function()
{
$('.modal').modal({detachable: true, closable: false, transition: 'fade up'});
$("#aBtn").on("click", function(){
$('.modal').modal('show');
});
}
$(document).ready( aFunction );
<div class="ui basic large modal">
<i class="close icon"></i>
<div class="header">
Archive Old Messages
</div>
<div class="content">
<div class="image">
<i class="archive icon"></i>
</div>
<div class="description">
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
</div>
<div class="actions">
<div class="two fluid ui inverted buttons">
<div class="ui red basic inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green basic inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
</div>
Semantic UI does not support draggable modals at the moment like JQuery UI does.
Default value of Detachable option is already true, which means that if you open a new modal the previous one will be moved to the background (= dimmer) and is not usable anymore (visualised with darker color).
I'm using the form navbar-search. I want to have an "advanced search" modal that opens from a link within the navbar.
If I put the modal div within my tag in the navbar, when the modal opens it is behind the darkened area that is normally outside of the modal window. Clicking anywhere closes the modal and the darkened mask.
I can fix this by moving the modal div outside of the navbar (and, thus, outside of my form) but then it breaks my form functionality. The advanced search modal is supposed to function as an extension of the form field directly in the navbar but if I use two different forms to fix the modal problem, the forms don't work together any longer. Does that make sense?
If I enclose the entire nav bar plus my modal (which is outside the navbar) in a tag, it works but screws up some of the navbar formatting so I'm thinking this is not a very clean solution.
So, I either need to a way to fix the modal display issue or a way to make my form situation work properly (as in, linking two forms together without having a ton of duplicate markup for hidden fields and the like).
Thanks for any ideas!
Matt
Here is what I have now (which I've gone ahead and just adjusted css afterward to make things line up). I don't think it is semantically correct according to how bootstrap's navbar is supposed to be used, but my form is working correctly and that is a big deal to me. :)
<form>
<navbar></navbar>
<modal></modal>
</form>
I am a little unsure what you are asking, but this is a stab at what I think you are asking. The modal does not actually need to put the code for the modal in the form itself. The only thing you need in the navbar is the link and trigger activating the modal.
<form>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Advanced Search</li>
</ul>
</div>
</div>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Advanced Search</h3>
</div>
<div class="modal-body">
<p>Put your search fields here. </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Search</button>
</div>
</div>
See working link.
http://jsbin.com/ifaqaj/1/edit
I'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.
I'm using the following script to create a toggle effect for opening and closing div's.
<script type="text/javascript" src="/mainmenu/js/jquery.min.4.1.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery(".content").hide();
jQuery(".heading").click(function()
{
jQuery(".content").hide();
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
<div class="main_text_faq"
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum</div>
</div>
Now I can't just seem to figure out how I can let Header 1 to always be open and to have Header 2 open when entering the content.
Any ideas how I can start coding this? I am in the process of learning how to use Jquery so please forgive me for not having anything to show for what I allready tried to fix my "problem"
Thanks in advance.
Regards!
If I've understood your question correctly, you want the first .content element to stay visible when the others are initially hidden. To do that you can use the :not and :first pseudo-selectors to exclude the first element:
jQuery(".content:not(:first)").hide();
Here's a working example.
I have a button, by default it adds the class ui-btn-corner-all. How can I tell it not to use that, as I just want square edges or force another style on there I've created?
<div data-role="content" data-theme="home">
Content
</div>
Live Example:
http://jsfiddle.net/SCw8e/3/
HTML:
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Button w/ jQM Style
Button wo/ rounded corners jQM Style
Button wo/ icon jQM Style
Button wo/ icon/rounded corners jQM Style
</div>
</div>
JS:
$('#default-button-style-1').removeClass('ui-btn-corner-all');
$('#default-button-style-2').removeClass('ui-btn-icon-left');
$('#default-button-style-3').removeClass('ui-btn-icon-left ui-btn-corner-all');
You can use jQuery function removeClass('ui-btn-corner-all'). There are no other ways to do what you want.