Skip to content

Instantly share code, notes, and snippets.

@rafael-neri

rafael-neri/modals.html

Created December 4, 2014 20:36
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rafael-neri/27facc327a3320e7591e to your computer and use it in GitHub Desktop.
Save rafael-neri/27facc327a3320e7591e to your computer and use it in GitHub Desktop.
Download ZIP
Resolve Conflicts UI Frameworks - Modal Bootstrap and Semantic
Raw
modals.html
<html>
<head>
<title>Resolve Conflicts UI Frameworks</title>
<!-- styles -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.0.1/semantic.min.css" />
</head>
<body>
<!-- buttons -->
<div style="margin: 50px;">
<button id="button_semantic">Semantic</button>
<button id="button_bootstrap">Bootstrap</button>
</div>
<!-- Modal Semantic-UI -->
<div id="modal_semantic" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui medium image">
<img src="http://semantic-ui.com/images/avatar/large/chris.jpg">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<!-- Modal Bootstrap -->
<div id="modal_bootstrap" 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">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- scripts -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$.fn.bsModal = $.fn.modal.noConflict();
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.0.1/semantic.min.js"></script>
<script type="text/javascript">
$("#button_semantic").on("click", function(){
$("#modal_semantic").modal("show");
});
$("#button_bootstrap").on("click", function(){
$("#modal_bootstrap").bsModal("show");
});
</script>
</body>
</html>
@deshario
Copy link

deshario commented Jun 18, 2020 •
edited

i'm using semantic only but also it conflicts .... when i try to use ur method it says
jQuery.fn.bsModal = jQuery.fn.modal.noConflict();
Cannot read property 'noConflict' of undefined
I'm using on wordpress

@rafael-neri
Copy link
Author

@deshario run this code only after loading JQuery.

@priyachetwani
Copy link

Thanks buddy you saved my time :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment