Opening a Modal window through a button Click

Hello Gurus.

I am using HTML5 and I have following code that I am trying to use to open a modal window through a button click. But nothing is happening. I am a learner and developer. What am I missing ? Any Idea?

Below is Java Script

<script type="text/javascript">
    $(function() {
        var doOk = function() {
          $("#openModal").dialog("close");
       
        }
        var dialogOpts = {
          modal: true,
          buttons: {
            "Ok!": doOk
          },
          height: "400px",
          autoOpen: false
        };
        $("#openModal").dialog(dialogOpts);
        $("#openDialog").click(function() {
          $("#openModal").dialog("open");
        }); 
    });
  </script>

Code (JavaScript):

And below is HTMLCode

<button class="btnsignin"  style="margin-left:60%;"type="submit" id="openDialog">
                    next</button>
                    <div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Modal Box</h2>
        <p>This is a sample modal box that can be created using the powers of CSS3.</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    </div>

HTML:

Thanks,
Darsh

 

Hi Darsh.
jQuery-UI doesn't seem to like height as strings e.g. "400px".
So I guess you might want to change that to just 400 (and thus without enclosing quotes too).
Ref: http://api.jqueryui.com/dialog/#option-height

 

No offense, but what the **** does this have to do with HTML 5 or CSS3?!? You're using the fat bloated train wreck of halfwit nonsense known as jQuery and the even dumber train wreck known as jQuery-UI to do the heavy lifting.... Doing this with CSS3 would involve no JavaScript, and probably be best handled by "abusing a checkbox" to do it using the new :checked attribute and adjacent sibling selectors to do it.

<div class="dialogWrapper">
	<input type="checkbox" id="modalBoxTrack" class="dialogCheckbox">
	<label for="modalBoxTrack">Open Dialog</label>
	<div class="dialogWindow">
		<label for="modalBoxTrack" class="dialogClose>X</label>
		<h2>Modal Box</h2>
		<p>
			This is a sample modal box that can be created using the powers of CSS3.
		</p><p>
			You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.
		</p>
	<!-- .dialogWindow --></div>
<!-- .dialogWrapper --></div>

Code (markup):

Then you just...

.dialogWindow { display:none; }
.dialogCheckbox:checked+label+.dialogWindow { display:block; }

Code (markup):

THAT would be doing it using CSS3. Naturally you'd have to size or position the dialogWindow from the CSS as well, and visibly hide the checkbox.

 

DS's hate for everything jquery is well-known here. And he's probably right about it. But if you still want to use JQ, do something like this:

Example: http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>
<body>
<a href="#openModal">Open Modal</a>
<div id="openModal" class="modalDialog">
<div> <a href="#close" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>

Code (markup):

 

Thank you everyone for providing various solution approach. However, all examples provided show launching of Modal window either through a checkbox or through a link and they work great. But my requirement is to launch the same modal window through a button click. How do I achieve that?

I also tried following without any JS anywhere and it is still not working. I feel we are very close to solving it. Also tried removing # in front of div ID in the onclick event without any success.

    <button class="btnsignin"  style="margin-left:60%;"type="submit" id="openDialog" onclick="showModalDialog('#openModal')">
                    next</button>
                    <a href="#openModal">Open Modal</a>
                    <div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Modal Box</h2>
        <p>This is a sample modal box that can be created using the powers of CSS3.</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    </div>
</div>

Code (markup):

Thank you much for your time.
Darsh

 

If you must...

<button id="openModal">Open</button>

<div id="modal">
  <button id="closeModal">Close</button>
  <h2>Testing 123</h2>
</div>

Code (markup):

#modal {
  position: fixed;
  background: blue;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.2s;
}

#modal.active {
  opacity: 1;
  z-index: 2;
}

Code (css):

$('#openModal').click(function() {
  $('#modal').addClass('active')
})

$('#closeModal').click(function() {
  $('#modal').removeClass('active')
})

Code (javascript):

Demo:
http://codepen.io/anon/pen/QjPBMa

 

Notice how my suggestion used a label and said to HIDE the checkbox? Style the label to look like a button, end of problem.

You seem to be thinking default appearance of the tag instead of just leveraging the working tags. Remember if you are choosing your tags based on what they look like, you're choosing the wrong tags for the wrong reasons.

 

Thank you all. I ended up using Kewl's approach.