How to force close of bootbox.alert() on an outside of modal click? Ideally without jQuery.
I am using Bootbox v4.4.0.
You can specify this behavior when creating your alert, using the backdrop option.
Example:
bootbox.alert({
message: 'This is an alert!',
backdrop: true
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
The default for that option is null, which means clicking on the backdrop does nothing. Passing false removes the backdrop, and passing true shows the backdrop and makes clicking on it dismiss the dialog.
Related
I have a bunch of inputs on my HTML page, plus a textarea which is replaced by a TinyMCE editor. There are various scenarios where this page is loaded and every time one of the inputs must get the focus. But when the TinyMCE is initialized, it just steals the focus. I narrowed down the problem to an execCommand call which sets the default font size in TinyMCE.
The issue can be reproduced in this simplified code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('init', function() {
this.execCommand("fontSize", false, "14pt"); // <<---- This line causes the TinyMCE editor to steal the focus!
});
}
});
</script>
</head>
<body>
<input id="inp" />
<textarea>Hello, World!</textarea>
<script>
document.getElementById("inp").focus();
</script>
</body>
</html>
I have tested this in Firefox, Chrome, and Edge, and the same issue happened in all of them. Any idea how I can prevent this? I do not want to set the focus again once the TinyMCE is done initializing, since at that point the page has scrolled to the wrong spot.
I know I said I did not want to set the focus "again" once the TinyMCE is done initialization, but I ended up doing something similar to that. Instead of setting the focus at the bottom of the page, I moved the code inside the tinymce.init and also called $(document).scrollTop(0);. Here is the code:
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('init', function() {
this.execCommand("fontSize", false, "14pt"); // <<---- This line causes the TinyMCE editor to steal the focus!
// Scroll to the top of the page.
$(document).scrollTop(0);
// Now set the focus.
document.getElementById("inp").focus();
});
}
});
I believe there is a bug in TinyMCE and I hope it gets fixed in one of the future revs. I also hope this workaround helps someone down the road.
While you are issuing the command to change the font size, you aren't actually setting a default font in the TinyMCE editor. You are firing those commands, but if there is any content to be loaded into the editor, it won't have this font information applied.
To set default font information in TinyMCE use CSS, either via the content_css or content_style configuration options:
https://www.tiny.cloud/docs/configure/content-appearance/#content_style
https://www.tiny.cloud/docs/configure/content-appearance/#content_css
Here are examples that show the differences between the two approaches.
In this example: https://fiddle.tiny.cloud/oAhaab
...commands to set the default font family and size are issued, but they aren't applied to the content that is then loaded into the editor. They are fired, but don't end up applying to content loaded into the editor.
Whereas,in this example: https://fiddle.tiny.cloud/nAhaab
...the default font information is applied to loaded content via CSS as expected.
I have a delegated popup that is designed to display a modal on tablets and phones. Unfortunately, the modal appears to wait until the ajax call to #href is complete before it displays anything. From the docs it appears the modal should pop up with ajaxText filled in during the ajax call, but I see nothing until the popup suddenly appears. The call is predictably long enough (~5sec in development) that I know there isn't a chance that the loader isn't appearing for a split-second.
$('a.word').on(touchstart: touchWordPopup)
The following is in CoffeeScript, but follows convention from the official docs.
touchWordPopup: (event) ->
event.preventDefault()
// another function handles mouse hover popups,
// so let's disable that stuff.
$(this).off('mouseover mouseenter mouseleave')
$('#popup').jqm(
closeClass: 'close'
ajax: #href
ajaxText: '<h2>Loading...</h2>'
modal: true
).jqmShow()
HTML:
<html>
<head>...</head>
<body>
<div class='subscription'>
<a href="/words/foo" class='word'>Foo</a>
<!-- several more words... -->
</div>
<div id='popup' class='jqmWindow'></div>
</body>
</html>
I'm wondering whether delegation or CoffeeScript could be to blame, but I can't tell where the problem might be fixed.
The CoffeeScript is not to blame.
I've released jqModal 1.3.0, which immediately shows (displays) ajax enabled modals.
Documentation has been updated, and I've included an example (#5) to test for slower remote responses.
Because the equivalent of jqmShow() is now triggered immediately, if your ajax response includes elements that match closeClass, they will never attach. This is best corrected by patching jqModal and binding the event handler to the modal iteself, but for now you can use onLoad:
onLoad: function(hash){
var modal = hash.w;
$(hash.o.closeClass, modal).click(function(){
modal.jqmClose();
return false;
});
}
I have got problem with TinyMCE when TinyMCE is in Pop-up. Look on my explanation of this problem.
This code is in my JSON pop-up
<!-- TinyMCE -->
<script type="text/javascript" src="../../Scripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
<textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 80%">
Pełny opis...
</textarea>
<br />
When pop-up show first time you can see this editor
When pop-up show second time you can see this editor
In my opinion problem is here (only once is working this JS)
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
In the second case you see the textarea html element. This is probably because of the fact that you didn't shut down tinymce correctly when closing the first pop-up.
What happened behind the curtain is that the html structures are gone, but tinymce still got the editor instance registred and won't open up a new one with the same id when you reopen the pop-up. Solution here is to shut down tinymce when closing the pop-up.
To shut down an editor instance use:
tinymce.execCommand('mceRemoveControl',true,'your_editor_id');
To reinitialize use
tinymce.execCommand('mceAddControl',true,'your_editor_id');
Tinymce takes as editor id the id of the source html element (your textarea). In case there is none "content" is the default.
When I try to move to the next page using window.open on my iPhone, I always get a
quick white screen before the next page is loaded. I am using jquery mobile and cordova 2.1.
I have two pages.. I used the code below to move to the next page when I click on the "next" button :
function MovetoNextForm()
{
window.open("nextpage.html");
}
It moves to the next page, but the problem is before the next page appears, it's showing a white screen for few seconds (1-2 sec).
I have used these includes :
<script src="cordova-2.2.0.js" type="text/javascript"></script>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
Here are some screenshots of the issue.
Firstpage :
White screen :
Secondpage :
How can I solve this ?
You should use $.mobile.changePage("pagename.html").
Also you should read http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html for more information about Multi-Pages templates in jQuery Mobile.
Kind regards,
I need to show details on the popup. I don't have any idea how to do this. I need to do it in a MVC3 Razor view.
my Controller-
public ViewResult ViewDetail(Int32 id)
{
var q = from p in db.accs
where p.id == id
select p;
return View(q.FirstOrDefault());
}
my View-
<td># Html.ActionLink("View Detail", "ViewDetail", new { id=item.id }) </td>
use the Jquery UI ModalForm to show up your data.
Say you want to display the following in Modal pop-up of jquery .
<div id="displayinmodal">
<input type="file" id="file" name="file" />
<input type="submit" id="submitdata" value="Upload" />
</div>
Now write your jquery like this.
<script>
$(document).ready(function(){
$("#displayinmodal").dialog({ //displayinmodal is the id of the div you want to display in modal popup
autoOpen: true
});
});
</script>
That's it. you should get Modal popup in your browser.
Hope this helps
This kind of task isn't really what ASP.NET MVC / Razor does. Consider using a Javascript library like JQuery UI Dialog. You have to add several of the JQuery UI scripts to your page, but the payoff is a very simple API; you can create a basic dialog out of any HTML element (say with id mydiv) with one line of code:
$( "#mydiv" ).dialog();
And of course there are customizations and themes you can apply.
Of course, you could simply use the Javascript:
alert("my details here");
to get a basic modal popup, but I'm guessing that's not what you want.
If you want a simple no frills modal (with not much content) you can use a JavaScript alert like so:
alert('Hello from a modal popup');
If you would like a prettier option a common solution is to use jQuery UI's dialog which allows for a modal option. Take a look here for a demo of what you get with this option:
http://jqueryui.com/demos/dialog/#modal
The code is pretty simple; the below should do everything for you using Google's CDN as a source for the scripts and stock jQuery UI CSS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$( "#details" ).dialog({
modal: true
});
});
</script>
<div id="details">
Hello from a modal popup
</div>