I am looking for a simple Modal Window Lib in JS.
What I require from it, is to be able to
. load a url response into the modal
. load text in to the modal
What are the options I have ?
Note: I am using jQuery. Therefore, I can use a jQuery Modal plugin as well.
Thanks,
Prakash Raman
Check out Jquery UI's Modal Window.
Related
I am currently working on a simple Modal dialog, that should open on a button press; Figuring I´d use the bootstrap example (https://getbootstrap.com/docs/5.0/components/modal/) as a starter would be the best quick win.
As I am using pug as a view engine, I`ve quickly converted the HTML into Pug and tested it without success.
The Modal Container is not showing / popping up. I don`t get any errors within my console. Bootstrap is functioning perfectly.
The pug code:
include modules/head
// Button trigger modal
button.btn.btn-primary(type='button' data-bs-toggle='modal' data-bs-target='#exampleModal')
| Launch demo modal
// Modal
#exampleModal.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true')
.modal-dialog
.modal-content
.modal-header
h5#exampleModalLabel.modal-title Modal title
button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close')
.modal-body
| This is a test.
.modal-footer
button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
sdsadHead includes both jquery and bootstrap (v4.4).
Does anyone have any ideas why it wouldn`t work?
Suggestions about fade css settings couldnt help.
Thanks in advance.
As proposed by Sean above the issue was an incorrect load of the Bootstrap.js file.
Fail by developer.
FrameWork: Primefaces 3.4.2
Issue:
My code has one Non-ajax command button and two Ajax command buttons. When I submit the form through the Non-ajax button, once the page is loaded again ( Came to same page with updating some other data). Now If I click on the Ajax buttons they are not working.
Probably you have forgot about the update="" attribute, but it is hard to tell if you don't attach your code.
I have 2 html files
login.html
splitView.html
In login.html, I have written this code on button click for page navigation
$.mobile.changePage("splitView.html", "slideup");
I am able to navigate to splitView.html page. But the following function is not getting called on page load.
$(document).ready(function() {
}
Please suggest me what I am doing wrong ??
Thanks
You don't use $(document).ready(function(){}) in Jquery Mobile. You use pageInit() instead.
More info at Jquery Mobile Docs
I am trying to access the HTML code source of AJAX dynamically loaded content. How could I do it?
For example on Gmail, I am trying to access the HTML code of a given email discussion's content (the different entries of a given email discussion) which is loaded only when I click on this email discussion's line in the main list. The code source I can access is only the one of the page initially loaded (the list of all email discussions). Any idea?
Right-click on the page and select "Inspect Element". The element view is updated when JavaScript makes changes to the page, whereas the "View Source" view only shows content from when the page was loaded.
If you right click -> "View Source", it will show you the contents of a reloaded version of the page you are on.
Using "Inspect element" (hotkey CTRL+SHIFT+i) in Chrome shows the source of the dynamic content.
I think you want to bind event on the dom element that loaded after initial page load using ajax. If so then you can use jQuery library and you can use live method of jquery.
Here is a link for live method, you can check that.
http://api.jquery.com/live/
What you need
Download jquery latest library (http://docs.jquery.com/Downloading_jQuery)
and then include it in script within head
or you can use cdn http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
then do like following
<script>
$(document).ready(function(){
$("#ajax_dom_element_id").live('click_or_any_event',function(){
code snippet you wan dot
});
});
</script>
I think it will be helpfull.
I want to achieve a blur-page effect as an action from a pop up dialog box. How can I do this in HTML and CSS?
Thickbox
http://jquery.com/demo/thickbox/
Fontbox
http://www.mehdiplugins.com/misc/frontbox.htm
FancyBox
http://fancybox.net/
FancyZoom
http://www.cabel.name/draft1/2008/02/fancyzoom-10.html
SlimBox
http://www.digitalia.be/software/slimbox
Shadowbox
http://www.shadowbox-js.com/
I'm not sure about blurring, but Lightbox might do the trick for you.
Lightbox, or the more technical term a "Modal Popup"
if you're using ASP.NET you can use the ModalPopupExtender withinthe AjaxToolKit
There's also BlockUI plugin for the jQuery framework.
Check out the demos on the following site:
http://malsup.com/jquery/block/#demos
To use the plugin, you'll need to include the jQuery framework code. This is dead simple. You can download the jQuery code for free, and include it on your site from
http://www.jquery.com
With this and a lot of solutions given, you may need a that is hidden initally. The div becomes the content of the popup.