Load Un-clossable Jquery Modal on Page load - javascript

I am trying to force a user to first fill a form which will be in a un-closable modal and once the user enters the data he can get access to the website.
I am refering to this example.
-Example 5: the un-closable window
The modal is working exactly the way I want it but I am unable to make it load with the page.
I dont understand Javascript much thus I am stuck here.
I tried using this -
<script type="text/javascript">
$(document).ready(function() {
$("#ex5").dialog({modal: true});
});
</script>
But this didn't work.
Any help would really be appreciated.
Also please suggest any other un-closable popup modal which I can use instead of the one I have mentioned.

According to the jQuery UI Documentation, you can add the no-close class to the modal dialog to hide the close button.
Also, if your javascript is running too soon with $(document).ready(), you could try $(window).load().
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).load(function() { ... }) will run
once the entire page (images or iframes), not just the DOM, is ready.
http://learn.jquery.com/using-jquery-core/document-ready/
So you could try something like this, and make sure that there is an element with id="ex5".
<script type="text/javascript">
$(window).load(function() {
$("#ex5").dialog({modal: true,
dialogClass: 'no-close'});
});
</script>

Use this code to open modal with page load
<script type="text/javascript">
$(document).ready(function() {
$('#ex5').modal('show');
});
</script>
You find the detailed instructions about Bootstrap modal here http://getbootstrap.com/javascript/#modals

you Have to code like this, refer this coding,
$(document).ready(function () {
var outerThis = this, isCloseable = false;
$('#close-button').on('click', function (e) {
e.preventDefault();
if(outerThis.isCloseable) {
$('#ex5').hide();
outerThis.isCloseable = false;
}
});
});

Related

Trigger click on embedded video when page loads

I have noticed there are a few questions that have been asked on the above topic, however, there hasn't been one for embedded videos. I was hoping someone would be able to help.
Note: My first post - so apologies if i haven't provided the appropriate information!
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".container-fluid").on('click','#issuuclick',function(){
alert("it's working")
})
});
</script>
<div data-configid="26360926/39969074" style="width:525px; height:373px;margin: 0 auto;" class="issuuembed" id="issuuclick"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
the above is my html embedded and javascript code. The aim here is to automatically open the publication in full spread when the page loads but only the alert is popping up at the moment (I have used a timer).
Would appreciate some assistance!
Try
$(document).ready(function(){
$("#issuuclick").trigger("click");
});
//or
window.onload = function() {
$("#issuuclick").trigger("click");
};
The first example fires as soon as the document is ready to work with and the second example fires when the page is ready and ALL resources are loaded
And attach a click handler to "#issuuclick" like
$(document).on("click", "#issuuclick", function(){
// do something
});

Re-rendering jQuery function

So, I have following jquery function:
jQuery('.button').click(function(e) {
if(!isMobile) {
jQuery('.button').featherlight({
});
}
})
This creates an lightbox at the bottom of <body> like below:
Before lightbox is opened:
<body>
<button> Show lightbox</button>
<script src="https://...jquery.min.js"></script>
<script src="https://...custom_js.js"></script>
</body>
After lightbox is opened:
<body>
<button> Show lightbox</button>
<script src="https://...jquery.min.js"></script>
<script src="https://...custom_js.js"></script>
<div class="lightbox">Lightbox content</div>
</body>
Problem is that none of the jQuery function inside of this lightbox works as it was created after the page was loaded.
How do I "re-render" a js file after the lightbox is created?
Thanks!
Here is an example:
jQuery('#tags').keyup(function(e){
console.log(e);
if(e.which == 188) {
var tag = ...;
var data = '<button>tag</button>';
tags.push(tag);
jQuery('.tags ul').append(data);
jQuery(this).val('');
}
});
Here, a tag input will be "appended" or added to a div class="tags". However inside of the lightbox, this function is not executed at all.
Re-rendering a JS file is not how javascript is supposed to work.
What I recommend you to do is to run the a function in the afterContent callback.
As you can see in the featherlight documentation, there is a plenty of callbacks that can help you with this.
Example:
jQuery('.button').click(function(e) {
if(!isMobile) {
jQuery('.button').featherlight({
afterContent: function () {
// Do your code here
// The lightbox content will be ready
}
});
}
})
The proble here is that the light ox is dynamically added.
If you need any triggers to work inside or on that lightbox element you will need to use:
$(document).on('click', '.lightbox .button', function(){
...
});
Note that you do not want this code inside that lightbox, but inside your regular js file. Simply because we do not like inline js, and second you can trigger every dynamic content on the fly with above code.

Why won't my jQuery references work? Am I referencing the script incorrectly?

I'm trying to write a click event for an arbitrary button on an html page. I'm referencing jQuery and the JavaScript file in the here:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/product-swap.js"></script>
and the button here:
<button class="btn">Click Me</button>
I'm really just trying to have an alert appear on the screen to test the references. JavaScript:
$('.btn').click(function() {
console.log("STUPID LOG");
alert("Won't you appear, please!?");
});
When I click the button...nothing happens. Nothing appears in the log or in the console or in an alert window.
I know this is probably something arbitrary and stupid but I'm fairly new to JavaScript/jQuery and I'm racking my brain over this one.
Thanks!
try with this man:
$(document).ready(function(){
$('.btn').on('click', function() {
console.log("STUPID LOG");
// Reset the window object
delete window.alert;
alert('test');
});
});
Is the button after the script? If so then you can either move the button to before the script, or wrap the script in a
$(function(){ /* Code goes here */ });
Put your JQuery lines inside this:
$( document ).ready(function() {
//your code.
});
The HTML page isn't ready when you call the script, enclose your code with $(function(){...});, it will wait until the page is ready.
$(function(){
$('.btn').click(function() {
console.log("STUPID LOG");
alert("Fantastic, I will appear!");
});
});
I also recommend you to put your script tags at the end of your HTML page, the render of visual elements will be faster.
u can try like this too
function myFunction() {
alert("I am an alert box!");
}
<button onclick="myFunction()">Click Me</button>

Is there a way to use onclick without really onclick event?

I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
}​​​;
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>

Execute jQuery Popup When Page Loads?

I'm using the Reveal modal plugin by Zurb.
http://www.zurb.com/playground/reveal-modal-plugin
Does anybody know how I can get the modal to execute (as in open the popup box) when my page has finished loading as opposed to when the handler is clicked?
I'd like to use it to display a simple message each time somebody opens my homepage.
I've dug through the code and tried a few things, but I'm a self confessed jQuery noob.
I was going to post the entire contents of the jQuery plugin itself, but it might just be easier to download it and take a look for yourself.
Thanks!
:)
$(function() {
$('#myModal').reveal();
});
OR
$(document).ready(function() {
$('#myModal').reveal();
});
Couldn't you just do the following after you instantiate your modal:
$(document).ready(function() {
// instantiate modal first
$('#myModal').reveal();
});
Something like this should work:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').reveal();
});
</script>
Hey had trouble getting this to work on a page using other .js libraries where JQuery NoConflict was being used -- in that case try this:
jQuery(document).ready(function($) {
$('#myModal').reveal();
});

Categories

Resources