¿Cómo agregar una hoja de estilo para confirmar la casilla?

 

Quiero adjuntar este

...

código a mi cuadro de confirmación. Lo bash de varias maneras, pero no de éxito. Hago este código usando Laravel 5 y una plantilla Blade.

Por favor, esta pregunta es deferente, porque solía codificar larave 5 php framework. Utilicé el formato de la plantilla blade. entonces, usé esta syntax

  

{!! Form::submit('Update', ['class' => 'btn btn-primary','onclick'=>'return confirm("Are you sure?")']) !!} &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp {!! Form::button('Cancel', ['class' => 'btn btn-default']) !!}

Si está utilizando el progtwig de arranque, prefiero que use Modal of boot strap http://getbootstrap.com/javascript/#modals

O si desea utilizar fácilmente modal de arranque, puede usar bootbox: http://bootboxjs.com/

Tiene muestra sobre cómo usar confirmar modal en el ejemplo

HTML:

  

CSS:

 #modalContainer { background-color:rgba(0, 0, 0, 0.3); position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:10000; background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */ } #alertBox { position:relative; width:300px; min-height:100px; margin-top:50px; border:1px solid #666; background-color:#fff; background-repeat:no-repeat; background-position:20px 30px; } #modalContainer > #alertBox { position:fixed; } #alertBox h1 { margin:0; font:bold 0.9em verdana,arial; background-color:#3073BB; color:#FFF; border-bottom:1px solid #000; padding:2px 0 2px 5px; } #alertBox p { font:0.7em verdana,arial; height:50px; padding-left:5px; margin-left:55px; } #alertBox #closeBtn { display:block; position:relative; margin:5px auto; padding:7px; border:0 none; width:70px; font:0.7em verdana,arial; text-transform:uppercase; text-align:center; color:#FFF; background-color:#357EBD; border-radius: 3px; text-decoration:none; } /* unrelated styles */ #mContainer { position:relative; width:600px; margin:auto; padding:5px; border-top:2px solid #000; border-bottom:2px solid #000; font:0.7em verdana,arial; } h1,h2 { margin:0; padding:4px; font:bold 1.5em verdana; border-bottom:1px solid #000; } code { font-size:1.2em; color:#069; } #credits { position:relative; margin:25px auto 0px auto; width:350px; font:0.7em verdana; border-top:1px solid #000; border-bottom:1px solid #000; height:90px; padding-top:4px; } #credits img { float:left; margin:5px 10px 5px 0px; border:1px solid #000000; width:80px; height:79px; } .important { background-color:#F5FCC8; padding:2px; } code span { color:green; } 

JAVASCRIPT:

 var ALERT_TITLE = "Oops!"; var ALERT_BUTTON_TEXT = "Ok"; if(document.getElementById) { window.confirm = function(txt) { createCustomConfirm(txt); } } function createCustomConfirm(txt) { d = document; if(d.getElementById("modalContainer")) return; mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); mObj.id = "modalContainer"; mObj.style.height = d.documentElement.scrollHeight + "px"; confirmObj = mObj.appendChild(d.createElement("div")); confirmObj.id = "alertBox"; if(d.all && !window.opera) confirmObj.style.top = document.documentElement.scrollTop + "px"; confirmObj.style.left = (d.documentElement.scrollWidth - confirmObj.offsetWidth)/2 + "px"; confirmObj.style.visiblity="visible"; h1 = confirmObj.appendChild(d.createElement("h1")); h1.appendChild(d.createTextNode(ALERT_TITLE)); msg = confirmObj.appendChild(d.createElement("p")); //msg.appendChild(d.createTextNode(txt)); msg.innerHTML = txt; btn = confirmObj.appendChild(d.createElement("a")); btn.id = "closeBtn"; btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT)); btn.href = "#"; btn.focus(); btn.onclick = function() { removeCustomConfirm();return false; } confirmObj.style.display = "block"; } function removeCustomConfirm() { document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); }