Jump to content
m.s_shohan

Why bootstrap modal is not working? (Solved)

Recommended Posts

Hi, I am going through bootstrap 4 alpha version. But when I tried to create a simple modal I found that it doesn't work in my browser. Can anyone find out what is wrong I am doing?

The problem is fixed. It was causing problem because of incorrect data-target attribute.

 

<!DOCTYPE html>
<html lang= "en-US">
	<head>
		<meta charset= "utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name= "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit= no"/>
		<title> . Bootstrap</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	</head>
	
	<body>
		
		<div class= "container">
			<div class= "row">
				<div class= "col-12">
					<h1 class= "alert-info">Live Demo</h1>
					<div class= "w-100"></div>
					
					<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#liveModal">
						Go Live
					</button>
					<div class= "modal fade" tabindex="-1" id= "liveModal" role= "dialog" aria-labelledby= "liveModalLabel">
						<div class= "modal-dialog" role="document">
							<div class= "modal-content">
								<div class= "modal-header">
									<h5 class= "modal-title">Modal Title</h5>
									<button class= "close" type="button" data-dismiss= "modal" aria-label= "Close">
										<span aria-hidden= "true">×</span>
									</button>
								</div>
								<div class= "modal-body">
									<p>
										Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
									</p>
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		
		<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
	</body>
</html>

 

Edited by m.s_shohan
Found the solution already

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...