I'm beginning with this whole coding thing (it's beautiful) but I just found myself with an issue.
There's landing page I found and I kind of copied, it has a button that works as a hyperlink to another page but instead of that button, I have the code for a style sheet, it's kind of like a form people have to fill. So you press the button and the form pops out.
I have the code of the original landing page and I also have the code for the form but I don't know how to blend them, please help.
The first one is the original button code that takes people to https://myimstrategy.com/50perday-2/. I want to replace that site for a form that pops out. That's the second code in the bottom, I don't know how to merge both codes. I attached an image of the original button. I don't want to delete it, I just want the form to pop out when I click on it.
Thank you very much for your help!
.el-content{
display: inline-block;
width: auto;
height: auto;
min-width: 894px;
min-height: 114px;
}
.ib2-button {
color: rgb(15, 15, 15);
background-color: rgb(25, 202, 6);
border-color: rgb(0, 174, 0);
border-radius: 5px;
text-shadow: rgb(147, 138, 138) 1px 1px 0px;
background-image: none;
min-width: 920px;
min-height: 123px;
width: auto;
height: auto;
font-weight: bold;
font-size: 80px;
}
<div class="el-content">
Claim Your Spot Now >>
</div>
<link href="//app.webinarjam.net/assets/css/register_button.css" rel="stylesheet">
<div style="margin:auto;width:300px;">
<div class="embedded-joinwebinar-button">
<button type="button" class="btn btn-default css3button" title="regpopbox_35246_b21043f77c">
<span>Register now</span>
</button>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" language="javascript" type="text/javascript"></script>
<script src="//app.webinarjam.net/assets/js/porthole.min.js" language="javascript" type="text/javascript" async></script>
<script src="//app.webinarjam.net/register.evergreen.extra.js" language="javascript" type="text/javascript" async></script>
If you want to create a popup, you're going to want to use javascript.
This is typically referred to as a modal. Here is a link to a tutorial: How TO - CSS/JS Modal
You can use bootstrap modal, or add onclick="showForm()"
And then you put id="form" to the form. Then in the head tag put
<script>
function showForm(){
document.getElementById("form").style.display = "inline-block"; //It must have display: none, the form, and this will make it display
}
</script>
I couldn't find your image but I got it, you want to show a pop on a button click. You can simply provide a href like below:
<link href="jsFunctionName()" class="buttonClass">Open Form</link>
And try using jquery dialogue on link clicked via jquery. https://jqueryui.com/dialog/
e.g.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function jsFunctionName() {
$("#dialog").dialog();
} );
</script>
<div id="dialog" title="My Form">
<form>
</form>
</div>
Related
I have an error message that only shows if the audio file isn't found. If it is found then people see an ON button. The error message can be clicked on to reload the page. I want it to remain on the current active drop down menu page. Right now it makes you reselect an option from the drop down menu.
<!--I coult not get the page to display properly by putting the JS code here. That is why it's in the html field-->
<!--I coult not get the page to display properly by putting the css code here. That is why it's in the html field-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<style>
.down {
font: bold 15px Arial;
background-color: red;
color: white;
padding: 3px 3px;
width: 100%;
text-decoration: none;
display: inline-block;
border-top: 5px solid red;
border-right: 5px solid red;
border-bottom: 5px solid red;
border-left: 5px solid red;
}
</style>
<style>
select {
border: 50px;
color: #000000;
background: #12f3fd;
text-align: center;
font-weight: bold;
*background: Black;
}
</style>
</head>
<body>
<div align="center">
<select name="stations" id="station" style="font-size:25px;" align="center">
<option>Select a Opton</option>
<option value="1">What you see if audio file was found</option>
<option value="2">What you see if audio file was not found</option>
</select>
</div>
<div class="st hidden" id="st1">
<p>
<audio id="audio1" src="example.mp3"></audio>
<button id="A" class="button">ON</button>
</p>
</div>
<div class="st hidden" id="st2">
<p>
<audio id="audio2" src="example.mp3"></audio>
<button id="B" class="button">ON</button>
</p>
</div>
</body>
<!--Controls the Drop Down Menu-->
<script>
$(document).ready(function(){
$('#station').on('change', function(){
var theVal = $(this).val();
$('.st').addClass('hidden');
$('.st#st' + theVal).removeClass('hidden');
});
});
</script>
<!--Displays the error message if the audio file is not found and gives the option to reload the page.-->
<div id="dwnB" class="down">
<script>
$("#audio2").on("error", function(e) {
document.getElementById("B").outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b></div>';
});
</script>
</div>
<!--This script reloads the page and is tied to the above script-->
<script>
const reloadtButton = document.querySelector("#reload");
// Reload everything:
function reload() {
reload = location.reload();
}
// Event listeners for reload
reloadButton.addEventListener("click", reload, false);
</script>
</html>
I get this when i run the snippet.
Error: {
"message": "Uncaught ReferenceError: reloadButton is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 123,
"colno": 1
}
Remember, Reload button is not in the body of the page but is in the script part of the page and only displays if there's an error. Even though button A in the first menu option should error as well. I did not write a script for it to do that so you can see what it looks like with out the error.
Here is the script for the reload button.
<!--Displays the error message if the audio file is not found and gives the option to reload the page. The entire error message is the reload button.-->
<div id="dwnB" class="down">
<script>
$("#audio2").on("error", function(e) {
document.getElementById("B").outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b></div>';
});
</script>
</div>
<!--This script reloads the page and is tied to the above script-->
<script>
const reloadtButton = document.querySelector("#reload");
// Reload everything:
function reload() {
reload = location.reload();
}
// Event listeners for reload
reloadButton.addEventListener("click", reload, false);
</script>
Reloading in the snippet causes the page to go blank. But if you run the code and reload somewhere else it displays as if you haven't chosen a menu option yet.
I don't know where "filename": "https://stacksnippets.net/js", is coming from as I don't see that in my code.
How can I get to to stay on the current selected menu option after the reload button is clicked?
const reloadButton = document.querySelector("#reload");
As there is no element with id reload, reloadButton value is null
reloadButton.addEventListener("click", reload, false);
As you now know that reloadButton is null, event cannot be attached
Instead of only creating the error body, add the reload button and then add an event, on this new reload button, refer code given below:
$('#audio2').on('error', function (e) {
document.getElementById('B').outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b><br><button class="reload">Reload</button> </div>';
//once element with id 'dwnB' is created find the Reload Button
let newReloadButton = document.querySelector("#dwnB .reload");
newReloadButton.addEventListener('click', reload, false);
});
$(document).ready(function () {
$('#station').on('change', function () {
let value = $(this).val();
$('.st').addClass('hidden');
$('.st#st' + value).removeClass('hidden');
//store your latest value in localStorage
localStorage.setItem('station', value);
});
//fetch the old value from localStorage
let oldStation = localStorage.getItem('station');
//set station value as per stored value
if (oldStation) {
$('#station').val(oldStation).trigger('change');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
As you created the New Reload Button, no need of this lines
const reloadButton = document.querySelector("#reload");
reloadButton.addEventListener("click", reload, false);
Note: No need to add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> as you are using <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
I'm trying to make a delete/remove popup on fullcalendar when I click the existing event.
Using JQueryUI's dialog, something is partially displayed.
(note. my events are all external events which have been dropped from side menu)
The following two methods are the closest I got to displaying something.
Method 1 with dialog in eventRender
$('#calendar').fullCalendar({
….
eventRender: function (event, element){
$("#eventContent").dialog({ modal: true, title: event.title, width:350}); });
….
});
<div id="eventContent" title="Event Details" >
</div>
and
Method 2 with dialog in eventClick
$('#calendar').fullCalendar({
….
eventClick: function(event){
$("#eventContent").dialog({ modal: true, title: event.title, width:350}); });
….
});
<div id="eventContent" title="Event Details" >
</div>
both behaviors are same
It shows the title of fectched event and close button.
But popup dialog window is not there (not surrounded).
It displays only texts on fullcalendar .
Does anyone why the dialog isn't displaying properly? The window is only displaying text.
Also, I don't if I should include any particular css code for the popup window but these are all css from my code.
So if I am missing some css for popup window, can anyone inform me of the reference css code for the dialog popup?
<style>
body {
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
#external-events .fc-event {
margin: 10px 0;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 900px;
}
</style>
and my .js links..
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>
The modal isn't showing correctly because you don't have the jquery ui css loaded.
<link href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.css' rel='stylesheet' />
And go with the eventClick method.
Edit 1:
I have no luck to display the dialog box... it shows still only text...
Okay, try this:
eventClick: function(event){
$("<div>").dialog({ modal: true, title: event.title, width:350});
},
This will create a new element and make it a dialog.
I answer my own question. I have found solution myself. but I am not really able to explain since I am new to this. but I think this may help someone with similar trouble and for my own memory backup. I decide to post answer to my own question.
I couldn't succeed with dialog (box doesn't display only able to display text).
After several days of efforts and with [reference] for the code 2) 3), I decide to try with bootstrap modal again.
then I got a luck.. so here is working code.
1) At first, all links I need (I figured what combination of links I need and this was kind of key part that make it work) =>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.4/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.4/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal-bs3patch.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/img/ajax-loader.gif"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.min.js"></script>
2)javascript part : eventClick code in fullcalendar code
$('#calendar').fullCalendar({
….
eventClick: function(event){
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#fullCalModal').modal();
},
….
});
3) html, bootstrap modal part
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Remove</button>
</div>
</div>
</div>
</div>
and thanks to #slicedtoad , keep motivating me!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a very simple website with some menu tabs (i.e. Home, About Me etc.) and few paragraphs. I added click function inside my .JS file so that the clicking on tab can navigate to the desired paragraph (or page). But it's not working.
I should refernce to this post as I posted back.
[NOTE: I have apache running in my computer and xwamp is installed. I have jquery source added into my file and they are accurately saved in correct path or file. Besides I have Bootstrap installed, though I didn't necessarily need to set path for any file to it.]
My code:
main.php:
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main_interaction.js"></script>
<div class="row">
<div id="header" class="col-xs-12">
<h1>Welcome to my green world!</h1>
</div>
<div class="col-xs-4">
<ul>
<li id="home">HOME</li>
<li id="gallery">GALLERY</li>
<li id="about">ABOUT ME</li>
<li id="contact">CONTACT ME</li>
<li id="diary">MY DIARY</li>
<li id="blog">BLOG</li>
</ul>
</div>
<div class="col-xs-8 home">
<p>Thank you for spending your time to visit my website. My name is Jabir Al Fatah. I live in Sweden. I have a lot of interest in web developing and 3d graphics designing. I am a travel addicted guy. I love to travel and have experience about diversity among life and nature. I am passionate. I don't do everything just becuase I am obliged to do,rather I like to take risk to be done with something just because I like.I haven't have a wonderful childhood in my life. But I admit it that my parents were surprisingly aware of my future and even every singlestep in my life. Their love and affection fulfilled all of my demand.Well, I just admired them a little. There are tons of others stuff I can say. However, in my life, changes happen very fast.</p>
</div>
<div class="col-xs-8 gallery hidden">
<p>This is the gallery.</p>
</div>
<div class="col-xs-8 about hidden">
<p>This paragraph should appear while clicking on "About me". Beisides, it's not accurately placed in the window. I need to fix that .Another problem is that this paragraph moves under the menu area by pushing it up when I make the window size smaller.</p>
</div>
<div class="col-xs-8 contact hidden">
<p>Contact me here.</p>
</div>
<div class="col-xs-8 diary hidden">
<p>My diary will be here.</p>
</div>
<div class="col-xs-8 blog hidden">
<p>Blog posts appear here.</p>
</div>
<div id="footer" class="col-xs-12">Developed by Jabir Al Fatah</div>
</div>
</body>
</html>
.JS:
$("li").on('click', function () {
$(".col-xs-8").addClass("hidden");
$("." + $(this).attr("id")).removeClass("hidden");
});
.CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.row {
margin: 0;
}
#header {
background-color: mediumturquoise;
text-align: center;
padding: 20px;
border: 4px solid crimson;
}
.col-xs-8 {
text-align: center;
font-family:'Verdana';
color: mediumblue;
font-size: 13pt;
}
.col-xs-4{
border: 4px solid crimson;
background-color: yellow;
line-height: 40pt;
font-family:'Tahoma';
font-size: 15pt;
font-weight: bold;
margin: 0;
padding: 0;
}
.col-xs-4 ul {
list-style-type: none;
}
#footer {
background-color: gray;
border: 2px solid green;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
li:hover {
cursor: pointer;
text-decoration: underline;
}
You're including (and thus executing) the JavaScript before the elements exist on the page. HTML/JavaScript is processed in the order in which is exists in the DOM. So when this runs:
$("li")
the parser is only at the top of the HTML body and hasn't loaded any li elements into the DOM yet. Thus, that selector doesn't find anything.
Either put the JavaScript at the end of the DOM or wrap it in a document ready handler:
$(function () {
$("li").on('click', function () {
// etc.
});
});
(or both)
on not support from jquery 1.9, try live
$("li").live("click",function(){});
I looked at your code and was wondering if replacing
$("li").on('click', function () {
with
$("li").click(function() {
would solve the issue. I've used jquery for a while but have never used ".on" but my onclicks work fine. Hope this helps!
All my code seems to work except my javascript am I doing something wrong?
Thanks Im only a beginner!
I am trying to make the background change when the mouse goes over the 'Tags' tab but it wont do it? What is going on?
HTML:
<html>
<head>
<script language="JavaScript" type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});
// This changes color when clicked, removed old color box.
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});-->
</script>
<link href="arg.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tab-item tab-selected" id="search-box">
Search
</div>
<div class="tab-item" id="tag-box">
Tags
</div>
</body>
</html>
CSS:
.tab-item {
-moz-border-radius: 10px;
border-radius: 10px;
font: 14px helvetica;
color: #000;
height: 20px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 75px;
}
.tab-mouseover {
background: #bdbdbd;
}
.tab-selected {
background: #c0c0c0;
}
Thanks!
James
You're using jQuery but haven't included it.
You also need to put your jquery code into the jquery ready event:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$(function(){
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});
// This changes color when clicked, removed old color box.
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});
});
-->
</script>
You haven't added your library (jQuery, I think) as a source here.
Add it like this:
<script src='http://foo.com/bar/library.js'></script>
If you are, indeed using jQuery, you can directly add the following code to make it work:
<script src='http://code.jquery.com/jquery-1.6.4.js'></script>
Note that the above means you are depending on the availability of the jQuery website and not your own.
As per James' comment on this, yes, you can scrap the jQuery completely, but I'd recommend you to learn JavaScript yourself instead of copying code from a website. If you want to change the background color of the field onmouseover, use code like this:
<div onmouseover="this.style.backgroundColor='#bdbdbd';" onmouseout="this.style.backgroundColor='white';">Search</div>
Or
<div onmouseover='this.className="tab-mouseover"' onmouseout='this.className=""'>Search</div>
Or without JavaScript and just simple CSS:
<style>
.tab-mouseover:hover{
background: #bdbdbd;
}
</style>
<div class='tab-mouseover'>Search</div>
I can't answer the latter part, because I don't understand the use of deleting and then adding the same class to an element onclick.
Well, first, you haven't included a link to the jQuery library in your code. As a result, your code won't work, wherever you put it.
Second, since your code is in a script element at the head of the document, it will execute before the body of the document has been rendered. You need to put it in a
$(document).ready(function() {
/*
* Your code here
*/
});
block.
Try this:
$('.tab-item').hover(
function() {
$(this).addClass('tab-mouseover');
},
function() {
$(this).removeClass('tab-mouseover');
}
);
$('.tab-item').click(function() {
$('.tab-selected').removeClass('tab-selected');
$(this).addClass('tab-selected');
});
http://jsfiddle.net/7dDTv/1/
Is there a more elegant way of creating a JavaScript popup?
<head>
<script>
function myPopup() { window.open( "http://www.google.com", "myWindow", "status=1, height=300, width=300, resizable=0" )
}
</script>
</head>
<body>
<input type="button" onClick="myPopup()" value="popup">
</body>
jQuery UI has a great modal dialog plugin that is easy to use.
<head>
<script>
function myPopup(){
window.open("http://www.google.com", "myWindow",
"status=1,
height=300,
width=300,
resizable=0"
);
}
</script>
</head>
<body>
<input type="button" onclick="myPopup()" value="popup" />
</body>
The simplest, pure html/css.
Using the details element toggling capabilities, and the selector details[open]:
details > p {
padding: 0.5rem;
background: lightcoral;
margin: 0;
display: flex;
flex-direction: column;
}
details[open] {
position: fixed;
width: 33%;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
outline: 10px #000000d4 solid;
transition: all 2s linear
}
details[open] summary::after {
content: '❌';
float: right;
}
<details>
<summary>Project</summary>
<p>Save project<button>Save to file</button></p>
<p>Publish<button>POST</button></p>
<p>Update<button>Update</button></p>
</details>
<details>
<summary>Another Popup</summary>
<p>Powered by html<input></p>
</details>
Depends what you're trying to achieve... you could look at Modal Dialogue forms.
jQuery does this http://jqueryui.com/demos/dialog/ for examples.
That is how I open a modalDialog
function showModalDialog() {
window.showModalDialog('HizmetSuresiUzatma.aspx',
'',
'resizable: no;
scroll: No;
dialogWidth:640px;
dialogHeight:350px');
}
after a button click on a page called HizmetListesi.aspx.I write the JS code on that aspx file then call it with
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "hizmetYenileTahsilat", "showModalDialog()", true);
on aspx.cs file.
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.