Welcome to WebmasterWorld Guest from 3.227.233.78

Forum Moderators: open

Message Too Old, No Replies

Bootstrap using modal window and click event

     
8:31 pm on Jun 8, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts:1108
votes: 1


I like to set Bootstrap Modal using Select option and also link option (click event).

How to set also click event using link and also jQuery?


<!DOCTYPE HTML>

<html>

<head>
<title>Modal and link using click event</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="js/javascript.js"></script>
</head>

<body>


<select data-style="btn-primary" style="overflow:visible;">
<option selected="selected" value="">Choose TimeZone...</option>
<optgroup label="TimeZones">
<option value="Pacific/Samoa">(GMT-11:00) Midway Island, Samoa</option><option value="Pacific/Honolulu">(GMT-10:00) Hawaii</option><option value="America/Anchorage">(GMT-08:00) Alaska</option>
</optgroup>
</select>




<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
<h4 class="modal-title" id="MymodalID">My modal</h4>

</div><!-- .modal-header -->

<div class="modal-body">
timeZone area
</div>

</div><!-- .modal-content -->

</body>

</html>


and Javascript code:


jQuery(document).ready(function()
{
jQuery('.modal-content').hide();
var selectvalue = jQuery('select').val();
jQuery('select').click(function()
{
if(jQuery('select').val() != selectvalue) {
jQuery('.modal-content').show();
}
else {
jQuery('.modal-content').hide();
}
}
)
}
);



I'm not sure but (GMT-08:00) Alaska
will not change to Modal Window. Also, how to remove var selectvalue = jQuery('select').val(); and modify into link if needed.